WPF頁面菜單更改按鈕顏色

Question

我想實現某些東西時，思考它看起來非常簡單。

我有一個MVVM應用程序的種類，我有一個窗口有多個頁面/視圖，沿着頂部我有一個項目控制的按鈕，將您帶到各種頁面。現在，我希望當前頁面按鈕改變顏色，並在頁面上保持這種狀態。

下面是我的一些代碼：

<DockPanel> 
    <Border DockPanel.Dock="Top" BorderBrush="#FAAA" BorderThickness="0,0,0,3" Background="#FDDD"> 
     <ItemsControl ItemsSource="{Binding PageViewModels}"> 
      <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Button Width="75" 
          Height="30" 
          Content="{Binding Name}" 
          Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
          CommandParameter="{Binding }" 
          Style="{StaticResource MenuButton}"/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Border> 

    <ContentControl Content="{Binding CurrentPageViewModel}" /> 
</DockPanel> 

我被告知，數據觸發可以幫助，但我不知道如何實現爲一個ItemsControl。我是否需要將其分開，手動顯示所有按鈕，然後根據名稱或其他來設置它？

感謝

Answer 1

WPF已經有一個控制，它描述的行爲稱爲TabControl。如果你喜歡而不是常規的標籤，它可以被設計成看起來像按鈕，只需修改control template for tab items即可。以下是一些示例代碼，使選定的選項卡變爲紅色。

XAML：

<Window x:Class="WpfApplication.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:WpfApplication" 
     Title="MainWindow" Height="350" Width="525"> 

    <Window.Resources> 

     <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1"> 
      <GradientBrush.GradientStops> 
       <GradientStopCollection> 
        <GradientStop Color="#FFF" Offset="0.0"/> 
        <GradientStop Color="#EEE" Offset="1.0"/> 
       </GradientStopCollection> 
      </GradientBrush.GradientStops> 
     </LinearGradientBrush> 

     <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" /> 

     <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" /> 

     <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" /> 

     <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" /> 

     <Style TargetType="{x:Type TabItem}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type TabItem}"> 
         <Grid> 
          <Border 
           Name="Border" 
           Margin="0,0,-4,0" 
           Background="{StaticResource LightBrush}" 
           BorderBrush="{StaticResource SolidBorderBrush}" 
           BorderThickness="1,1,1,1" 
           CornerRadius="2,12,0,0" > 
           <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            Margin="12,2,12,2" 
            RecognizesAccessKey="True"/> 
          </Border> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter Property="Panel.ZIndex" Value="100" /> 
           <Setter TargetName="Border" Property="Background" Value="Red" /> 
           <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
          </Trigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" /> 
           <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" /> 
           <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

    </Window.Resources> 

    <StackPanel> 

     <TabControl 
      ItemsSource="{Binding Path=PageViewModels}"> 
      <TabControl.ItemTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Header}" /> 
       </DataTemplate> 
      </TabControl.ItemTemplate> 
      <TabControl.ContentTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Content}" /> 
       </DataTemplate> 
      </TabControl.ContentTemplate> 
     </TabControl> 

    </StackPanel> 

</Window> 

後面的代碼：

using System.Collections.Generic; 
using System.Windows; 

namespace WpfApplication 
{ 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
      InitializeComponent(); 

      DataContext = this; 
     } 

     public List<PageViewModel> PageViewModels 
     { 
      get 
      { 
       return new List<PageViewModel>() { new PageViewModel() { Header = "A", Content = "AAA" }, new PageViewModel { Header = "B", Content = "BBB" } }; 
      } 
     } 
    } 

    public class PageViewModel 
    { 
     public string Header { get; set; } 

     public string Content { get; set; } 
    } 
}