2016-02-03 107 views
0

我對WPF完全陌生,我試圖根據是否選中該選項卡來調整我的tabItem的樣式。我在網上找到了一段代碼,我知道觸發器中的樣式正確應用,具體取決於選項卡是否被選中。WPF - 無法使用觸發器實現TabItem樣式設計

首先,我想會是這樣的風格:

enter image description here

現在,作品風格與此XAML(在這裏沒有觸發器):

<Window x:Class="DevelopmentConfigurator.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:DevelopmentConfigurator" 
     mc:Ignorable="d" 
     Title="Development Configurator" Height="350" Width="525"> 

    <Window.Resources> 
     <Style x:Key="activeTabStyle" TargetType="TabItem"> 
      <Setter Property="Foreground" Value="#FF0067CD"></Setter> 
      <Setter Property="FontWeight" Value="Bold"></Setter> 
      <Setter Property="Height" Value="35"></Setter> 
     </Style> 

     <Style x:Key="inactiveTabStyle" TargetType="TabItem"> 
      <Setter Property="Foreground" Value="White"></Setter> 
     </Style> 

    </Window.Resources> 


    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="50*"/> 
      <ColumnDefinition Width="467*"/> 
     </Grid.ColumnDefinitions> 



     <TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2"> 
      <TabItem Header="TabItem" Style="{StaticResource activeTabStyle}"> 
       <TabItem.Background> 
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
         <GradientStop Color="#FFF3F3F3" Offset="0"/> 
         <GradientStop Color="#FFEBEBEB" Offset="0.5"/> 
         <GradientStop Color="#FFDDDDDD" Offset="0.5"/> 
         <GradientStop Color="White" Offset="1"/> 
        </LinearGradientBrush> 
       </TabItem.Background> 
       <Grid Background="#FFE5E5E5" Margin="0,0,0,21"/> 
      </TabItem> 
      <TabItem Header="TabItem" Foreground="White" RenderTransformOrigin="0.5,0.5"> 
       <TabItem.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform/> 
         <RotateTransform Angle="0.527"/> 
         <TranslateTransform/> 
        </TransformGroup> 
       </TabItem.RenderTransform> 
       <TabItem.Background> 
        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
         <GradientStop Color="#FF00A0E8" Offset="0"/> 
         <GradientStop Color="#FF0067CD" Offset="1"/> 
         <GradientStop Color="#FFDDDDDD" Offset="1"/> 
         <GradientStop Color="#FFCDCDCD" Offset="1"/> 
        </LinearGradientBrush> 
       </TabItem.Background> 
       <Grid Background="#FFE5E5E5"/> 
      </TabItem> 
     </TabControl> 

    </Grid> 
</Window> 

現在,因爲我需要使用觸發器,我嘗試了下面的代碼,但是我無法獲得無效標籤的背景:

<Window x:Class="DevelopmentConfigurator.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:DevelopmentConfigurator" 
     mc:Ignorable="d" 
     Title="Development Configurator" Height="350" Width="525"> 


    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="50*"/> 
      <ColumnDefinition Width="467*"/> 
     </Grid.ColumnDefinitions> 

     <TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2"> 
      <TabControl.Resources> 
       <Style TargetType="TabItem"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="TabItem"> 
           <Grid Name="Panel" Background="White"> 
            <ContentPresenter x:Name="ContentSite" 
             VerticalAlignment="Center" 
             HorizontalAlignment="Center" 
             ContentSource="Header" 
             Margin="10,2"/> 
           </Grid> 
           <ControlTemplate.Triggers> 
            <Trigger Property="IsSelected" Value="True"> 
             <Setter Property="Foreground" Value="#FF0067CD"></Setter> 
             <Setter Property="FontWeight" Value="Bold"></Setter> 
             <Setter Property="Height" Value="35"></Setter> 

             <Setter Property="Background"> 
              <Setter.Value> 
               <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                <GradientStop Color="#FFF3F3F3" Offset="0"/> 
                <GradientStop Color="#FFEBEBEB" Offset="0.5"/> 
                <GradientStop Color="#FFDDDDDD" Offset="0.5"/> 
                <GradientStop Color="White" Offset="1"/> 
               </LinearGradientBrush> 
              </Setter.Value> 
             </Setter> 

            </Trigger> 
            <Trigger Property="IsSelected" Value="False"> 
             <Setter Property="Foreground" Value="White"></Setter> 
             <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter> 

             <Setter Property="RenderTransform"> 
              <Setter.Value> 
               <TransformGroup> 
                <ScaleTransform/> 
                <SkewTransform/> 
                <RotateTransform Angle="0.527"/> 
                <TranslateTransform/> 
               </TransformGroup> 
              </Setter.Value> 
             </Setter> 

             <Setter Property="Background"> 
              <Setter.Value> 
               <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
                <GradientStop Color="#FF00A0E8" Offset="0"/> 
                <GradientStop Color="#FF0067CD" Offset="1"/> 
                <GradientStop Color="#FFDDDDDD" Offset="1"/> 
                <GradientStop Color="#FFCDCDCD" Offset="1"/> 
               </LinearGradientBrush> 
              </Setter.Value> 
             </Setter> 

            </Trigger> 
           </ControlTemplate.Triggers> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 

      </TabControl.Resources> 
      <TabItem Header="Packages"> 
       <Label Content="Content goes here..." /> 
      </TabItem> 
      <TabItem Header="Updates" /> 
      <TabItem Header="EnvironmentVariables" /> 
     </TabControl> 

    </Grid> 
</Window> 

我得到的結果如下:

enter image description here

正如你所看到的,白色的成功應用,但背景是不是。我猜它可能是與此相關的代碼語法問題:

<Trigger Property="IsSelected" Value="False"> 
    <Setter Property="Foreground" Value="White"></Setter> 
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter> 

    <Setter Property="RenderTransform"> 
     <Setter.Value> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform Angle="0.527"/> 
       <TranslateTransform/> 
      </TransformGroup> 
     </Setter.Value> 
    </Setter> 

    <Setter Property="Background"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
       <GradientStop Color="#FF00A0E8" Offset="0"/> 
       <GradientStop Color="#FF0067CD" Offset="1"/> 
       <GradientStop Color="#FFDDDDDD" Offset="1"/> 
       <GradientStop Color="#FFCDCDCD" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 

</Trigger> 
因爲我想,當標籤處於非活動狀態將顯示

我應該怎麼才能更改背景是什麼?

回答

1

既然你要替換TabItemControlTemplate給它一個新的視覺樹/外觀,你必須指定什麼意思改變其Background,該元素在新的視覺樹表示背景。

我認爲這是最外層的Grid,叫Panel。將其更改爲此,它將工作:

<Grid Name="Panel" Background="{TemplateBinding Background}">