更改用作 TabItem 的按钮的背景 Header

Question

我使用教程中的代码在WPF中开发带有TAB菜单的GUI。在这里，按钮用作TAB菜单8header，每个按钮都链接到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 ) 的背景。

Answer 1

我在下面的示例中使用社区工具包 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 技术介绍。