WPF自定义的TabControl模板

Question

我想实现这个标签的设计：

从设计，我可以明白这

• 的标签标题是<Border>Image</Border> + Text + a bottom条形成
• 选定的标题标题应为：Border.Background = Green，Text.Foreground = Green
• 其余未选中的选项卡具有sa我的颜色。

什么我已经做：

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch"> 
    <!-- http://www.wpf-tutorial.com/tabcontrol/styling-the-tabitems --> 
    <TabControl.Resources> 
     <Style TargetType="TabItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical"> 
          <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            Margin="10,2"/> 
          <TextBlock Name="BottomBar" Background="Gold" Height="5" /> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <!--<Setter TargetName="Panel" Property="Background" Value="Green" />--> 
           <Setter TargetName="BottomBar" Property="Background" Value="Green" /> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="False"> 
           <!--<Setter TargetName="Panel" Property="Background" Value="Gold" />--> 
           <Setter TargetName="BottomBar" Property="Background" Value="Gold" /> 
          </Trigger> 
          <!--<Trigger Property="Panel.IsMouseOver" Value="true"> 
           <Setter TargetName="Panel" Property="Background" Value="Yellow"/> 
          </Trigger>--> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 
    <TabItem> 
     <TabItem.HeaderTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Stretch"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="1*" /> 
         <ColumnDefinition Width="5*" /> 
        </Grid.ColumnDefinitions> 
        <Border Grid.Column="0" Background="Green"> 
         <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" /> 
        </Border> 
        <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center" 
            FontSize="20" Foreground="Green" /> 
       </Grid> 
      </DataTemplate> 
     </TabItem.HeaderTemplate> 
     <TabItem.Content> 
      <ContentControl Name="Dashboard" /> 
     </TabItem.Content> 
    </TabItem> 
</TabControl> 

我停留在在所选择的选项卡改变结合底栏+文字+图像的颜色。我试过使用TemplatedBinding没有成功，你能帮我吗？由于

Answer 1

如果你添加一个样式触发时，它被选中，你可以使用一个RelativeSource的Border元素的Background和Foreground财产，并在HeaderTemplate中这个属性分别TextBlock绑定，设置了TabItem的Foreground属性：

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch"> 
    <TabControl.Resources> 
     <Style TargetType="TabItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical"> 
          <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            Margin="10,2"/> 
          <TextBlock Name="BottomBar" Background="Gold" Height="5" /> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter TargetName="BottomBar" Property="Background" Value="Green" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <Trigger Property="IsSelected" Value="True"> 
        <Setter Property="Foreground" Value="Green" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </TabControl.Resources> 
    <TabItem> 
     <TabItem.HeaderTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Stretch"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="1*" /> 
         <ColumnDefinition Width="5*" /> 
        </Grid.ColumnDefinitions> 
        <Border Grid.Column="0" Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}"> 
         <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" /> 
        </Border> 
        <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center" 
            FontSize="20" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}" /> 
       </Grid> 
      </DataTemplate> 
     </TabItem.HeaderTemplate> 
     <TabItem.Content> 
      <ContentControl Name="Dashboard" /> 
     </TabItem.Content> 
    </TabItem> 
</TabControl>