WPF自定义TabItem样式

WPF

---

前言

WPF自定义TabItem样式

---

一、WPF TabItem是什么？

说明：TabItem是一个tab选项值

二、使用

1. Style代码

代码如下（示例）：

<SolidColorBrush x:Key="TabItem.Static.Foreground" Color="#42445A" />
<SolidColorBrush x:Key="TabItem.Selected.Foreground" Color="#0176FF" />
 
<Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="6,2,6,2" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Border
x:Name="mainBorder"
Margin="0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="0" />
<Grid
x:Name="underLine"
Height="2"
Margin="3,0"
VerticalAlignment="Bottom"
Visibility="Collapsed" />
<ContentPresenter
x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
ContentSource="Header"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
</MultiDataTrigger.Conditions>
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Selected.Foreground}" />
<Setter TargetName="contentPresenter" Property="Opacity" Value="0.56" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false" />
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
</MultiDataTrigger.Conditions>
<Setter TargetName="underLine" Property="Visibility" Value="Collapsed" />
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Static.Foreground}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
</MultiDataTrigger.Conditions>
<Setter TargetName="underLine" Property="Visibility" Value="Visible" />
<Setter TargetName="underLine" Property="Background" Value="{StaticResource TabItem.Selected.Foreground}" />
<Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Selected.Foreground}" />
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

效果图

WPF 自定义TabItem样式效果图提示：

来源：https://www.cnblogs.com/wangjinming/p/15093617.html