如何解决设置 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。