设置标签被点击和未点击时 TabItem 标题的前景颜色

Posted 2023-03-29

【中文标题】设置标签被点击和未点击时 TabItem 标题的前景颜色

【英文标题】：Setting the color of the TabItem header's foreground when the tab is clicked and not clicked

【发布时间】：2021-09-11 10:15:06

【问题描述】：

我的应用程序中有这个TabControl：

<TabControl Width="100" Height="100">
    <TabControl.Resources>
        <Style TargetType="x:Type TabItem" x:Key="TabItemStyle">
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="x:Type TabItem">
                        <Border x:Name="Chrome"
                                BorderBrush="Blue" 
                                Background="Transparent">
                            <ContentPresenter ContentSource="Header"
                                              Margin="0,0,0,3"
                                              HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                                              VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,3"/>
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="False">
                                <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Style="DynamicResource TabItemStyle">
        <TabItem.Header>
             <Label Content="Tab 1" />
        </TabItem.Header>
    </TabItem>

    <TabItem Style="DynamicResource TabItemStyle">
        <TabItem.Header>
             <Label Content="Tab 2" />
        </TabItem.Header>
    </TabItem>
</TabControl>

当我单击TabControl 中的选项卡时，选项卡标题下方会显示一条蓝线。这不是重点，但我确信我拥有的样式会很有用。

标签标题中有标签。 我想根据以下内容更改标签的前景：

当标签被点击时，标签的前景应该是Red。 标签未点击时，标签的前景应为Gray。

我假设我可以使用ControlTemplate 中已有的触发器来确定何时单击了选项卡。

但我不知道我需要做什么才能在样式中相应地设置标签前景。

【参考方案1】：

您可以将DataTemplate 创建为HeaderTemplate 并使用DataTrigger 来设置Labels 的Foreground 颜色，具体取决于包含TabItems 的选择状态，使用绑定RelativeSource。单独的标头模板还减少了TabItems 中的冗余，因为您不必每次都重新定义Label。

<TabControl Width="100"
            Height="100">
   <TabControl.Resources>
      <Style TargetType="x:Type TabItem"
             x:Key="TabItemStyle">
         <Setter Property="VerticalContentAlignment"
                 Value="Stretch" />
         <Setter Property="HorizontalContentAlignment"
                 Value="Stretch" />
         <Setter Property="HeaderTemplate">
            <Setter.Value>
               <DataTemplate>
                  <Label x:Name="TabItemHeaderLabel" Foreground="Gray" Content="Binding" />
                  <DataTemplate.Triggers>
                     <DataTrigger Binding="Binding IsSelected, RelativeSource=RelativeSource AncestorType=x:Type TabItem" Value="True">
                        <Setter TargetName="TabItemHeaderLabel" Property="Foreground" Value="Red"/>
                     </DataTrigger>
                  </DataTemplate.Triggers>
               </DataTemplate>
            </Setter.Value>
         </Setter>
         <Setter Property="Template">
            <Setter.Value>
               <ControlTemplate TargetType="x:Type TabItem">
                  <Border x:Name="Chrome"
                          BorderBrush="Blue"
                          Background="Transparent">
                     <ContentPresenter ContentSource="Header"
                                       Margin="0,0,0,3"
                                       HorizontalAlignment="TemplateBinding HorizontalContentAlignment"
                                       VerticalAlignment="TemplateBinding VerticalContentAlignment" />
                  </Border>
                  <ControlTemplate.Triggers>
                     <Trigger Property="Selector.IsSelected"
                              Value="True">
                        <Setter TargetName="Chrome"
                                Property="BorderThickness"
                                Value="0,0,0,3" />
                     </Trigger>
                     <Trigger Property="Selector.IsSelected"
                              Value="False">
                        <Setter TargetName="Chrome"
                                Property="BorderThickness"
                                Value="0,0,0,0" />
                     </Trigger>
                  </ControlTemplate.Triggers>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>
   </TabControl.Resources>

   <TabItem Style="DynamicResource TabItemStyle"
            Header="Tab 1"/>

   <TabItem Style="DynamicResource TabItemStyle"
            Header="Tab 2"/>
</TabControl>

【讨论】：

谢谢！仍然有一个错误。红色仅显示一小段时间。然后它回落到灰色。即使选择了选项卡。我无法在示例代码中重现此行为，只能在我的实际应用程序中重现。有什么建议可能是什么问题？

@Mc_Topaz 由于您只能在真实应用程序中重现该行为，因此可能有一些代码会更改或重置选择，例如SelectedItem 属性，但这只是一个假设。