设置 TabItem 标题在单击和未单击选项卡时的前景颜色

问题描述

我的应用程序中有此 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,3"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Selector.IsSelected" Value="True">
                                <Setter TargetName="Chrome" Property="BorderThickness" Value="0,3"/>
                            </Trigger>
                            <Trigger Property="Selector.IsSelected" Value="False">
                                <Setter TargetName="Chrome" Property="BorderThickness" Value="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 中已有的触发器来确定标签何时被点击。

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

解决方法

您可以创建一个 DataTemplate 作为 HeaderTemplate 并使用 DataTrigger 来设置 Foreground 的 Label 颜色，具体取决于 TabItem 的选择状态包含使用 RelativeSource 绑定的 TabItem。单独的标头模板还减少了 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,3" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="Selector.IsSelected" Value="True"> <Setter TargetName="Chrome" Property="BorderThickness" Value="0,3" /> </Trigger> <Trigger Property="Selector.IsSelected" Value="False"> <Setter TargetName="Chrome" Property="BorderThickness" Value="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> 。

Stream