wpf 更改用作选项卡项标题的按钮的背景

gkl3eglg 于 2023-02-05 发布在其他

关注(0)|答案(1)|浏览(114)

我使用来自tutorial的代码在WPF中开发了一个带有选项卡菜单的GUI。在这里，按钮充当选项卡菜单标题，每个按钮都与一个id链接。基于用户选择，id会发生变化，这反过来会触发单击特定按钮时显示的内容。如果按钮被选中，我想更改按钮的背景。如何才能做到这一点？
以下是xaml代码：

<StackPanel Background="WhiteSmoke">
    <Grid Height="40">
        <StackPanel HorizontalAlignment="Left" Margin="20 0">
            <ComboBox FontSize="15" Width="50" Foreground="#FFA2A2A2" SelectedIndex="0" VerticalAlignment="Center">
                <ComboBoxItem Content="EN"/>
            </ComboBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="20 0">
            <Button Content="FAQ" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFA2A2A2" FontSize="15" FontWeight="Bold" VerticalAlignment="Center"/>
            <Button Content="CONTACT" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFA2A2A2" FontSize="15" FontWeight="Bold" VerticalAlignment="Center"/>
            <Button Content="ORDER STATUS" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFA2A2A2" FontSize="15" FontWeight="Bold" VerticalAlignment="Center"/>
            <Button Content="MY ACCOUNT" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFA2A2A2" FontSize="15" FontWeight="Bold" VerticalAlignment="Center"/>
        </StackPanel>
    </Grid>
    <Grid Height="100">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10 0">
            <Button x:Name="b1" Uid="0" Width="150" Content="HOME" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="1" Width="150" Content="SHOP" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="2" Width="150" Content="BLOG" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="3" Width="150" Content="PAGES" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="4" Width="150" Content="PRODUCTS" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="5" Width="150" Content="BRANDS" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
            <Button Uid="6" Width="150" Content="GIFT CARDS" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF2196F3" Click="Button_Click"/>
        </StackPanel>
        <Grid x:Name="GridCursor" Width="150" Height="5" Background="#FF2196F3" HorizontalAlignment="Left" Margin="10 0"/>
    </Grid>
    <Grid x:Name="GridMain" Height="460" Background="Aquamarine">

    </Grid>
</StackPanel>

下面是后面的代码：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        int index = int.Parse(((Button)e.Source).Uid);

        GridCursor.Margin = new Thickness(10 + (150 * index), 0, 0, 0);

        switch (index)
        {
            case 0:
                GridMain.Background = Brushes.Aquamarine;
                b1.Background = Brushes.Yellow;
                break;
            case 1:
                GridMain.Background = Brushes.Beige;
                break;
            case 2:
                GridMain.Background = Brushes.CadetBlue;
                break;
            case 3:
                GridMain.Background = Brushes.DarkBlue;
                break;
            case 4:
                GridMain.Background = Brushes.Firebrick;
                break;
            case 5:
                GridMain.Background = Brushes.Gainsboro;
                break;
            case 6:
                GridMain.Background = Brushes.HotPink;
                break;
        }
    }

如果使用b1.Background = Brushes.Yellow;选择按钮，我可以更改背景。但是，选择其他按钮时，背景不会更改为默认值。此外，我无法设置启动GUI的按钮（Uid =1）的背景。

wpf

来源：https://stackoverflow.com/questions/75308347/change-the-background-of-the-button-that-is-used-as-a-tabitem-header

1条答案

按热度按时间

qxsslcnc1#

我在下面的例子中使用了社区工具包mvvm，我不确定这是否能满足你的要求，但是绑定和模板演示了mvvm方法。
我的主窗口-没有按钮。

<Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ListBox ItemsSource="{Binding Choices}"
                 x:Name="lb"
                 >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="160">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="22"/>
                            <RowDefinition Height="12"/>
                        </Grid.RowDefinitions>
                        <Rectangle Fill="Yellow">
                            <Rectangle.Style>
                                <Style TargetType="Rectangle">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                    <Style.Triggers>
                                        <DataTrigger
                                            Binding="{Binding RelativeSource={RelativeSource
                                                    Mode=FindAncestor,
                                                    AncestorType={x:Type ListBoxItem}},
                                                    Path=IsSelected}"
                                                    Value="True">
                                            <Setter Property="Visibility" Value="Visible"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Rectangle.Style>
                        </Rectangle>
                        <TextBlock Text="{Binding Description}"
                                   TextAlignment="Center"
                                   />
                        <Border Grid.Row="1"
                                CornerRadius="10"
                                >
                            <Border.Background>
                                <SolidColorBrush Color="{Binding BackgroundBrushName}"/>
                            </Border.Background>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Rectangle Grid.Row="1">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding SelectedItem.BackgroundBrushName, ElementName=lb}"/>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>

主窗口视图模型

public partial class MainWindowViewModel : ObservableObject
{
    public List<Choice> Choices { get; set; } = new List<Choice>
    {
        new Choice{ Description = "Shop", BackgroundBrushName = "Red"},
        new Choice{ Description = "Blog", BackgroundBrushName = "Blue"},
        new Choice{ Description = "Products", BackgroundBrushName = "Green"}
    };
}

选择

public partial class Choice : ObservableObject
{
    public string BackgroundBrushName { get; set; }

    [ObservableProperty]
    private string description = string.Empty; 
}

这些属性都不会改变，但你应该总是在任何视图模型上实现inotifypropertychanged，ObservableObject添加了这一点。description不会改变，所以它实际上不需要改变通知，但我认为看到代码生成器为你创建一个Description属性会很有趣。
该集合被模板化到UI中。“菜单”是一个水平的列表框，它具有选择器行为，因此您可以单击一个，它就被选中了。
所选选项的背景通常是可见折叠的，但如果它在所选项中，则数据触发器将其设置为可见。
我们也可以绑定selecteditem mode=twoway，如果我们想要一个初始的选择，那么将它设置为第一个选择。
希望这能为您提供一个对mvvm技术相当初学者友好的介绍。

赞(0）回复(0）举报 2023-02-05

我来回答

wpf 更改用作选项卡项标题的按钮的背景

1条答案

相关问题

热门标签

最新问答