WPF Tabcontrol Tabitem带下划线样式

效果图如下

重写TabItem样式

 <Style TargetType="{x:Type TabItem}">
     <Setter Property="Foreground" Value="Black" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="#FFACACAC" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
         <Setter.Value>
             <ControlTemplate TargetType="{x:Type TabItem}">
                 <Grid
                     x:Name="templateRoot"
                     Background="Transparent"
                     SnapsToDevicePixels="True">
                     <Border
                         x:Name="_underline"
                         Margin="{TemplateBinding Margin}"
                         BorderBrush="#0054DC"
                         BorderThickness="0" />
                     <Grid Margin="10">
                         <TextBlock
                             x:Name="txt"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             FontSize="12"
                             Foreground="{TemplateBinding Foreground}"
                             Text="{TemplateBinding Header}"
                             TextTrimming="CharacterEllipsis"
                             ToolTip="{TemplateBinding Header}"
                             Visibility="Visible" />
                     </Grid>
                 </Grid>
                 <ControlTemplate.Triggers>
                     <MultiDataTrigger>
                         <MultiDataTrigger.Conditions>
                             <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
                             <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top" />
                         </MultiDataTrigger.Conditions>
                         <Setter TargetName="txt" Property="Foreground" Value="#0054DC" />
                     </MultiDataTrigger>

                     <MultiDataTrigger>
                         <MultiDataTrigger.Conditions>
                             <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
                             <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top" />
                         </MultiDataTrigger.Conditions>
                         <Setter Property="Panel.ZIndex" Value="1" />
                         <Setter TargetName="txt" Property="Foreground" Value="#0054DC" />
                         <Setter TargetName="_underline" Property="BorderThickness" Value="0,0,0,2" />
                     </MultiDataTrigger>
                 </ControlTemplate.Triggers>
             </ControlTemplate>
         </Setter.Value>
     </Setter>
 </Style>

TabItem包含2部分，Head和Content，在重写Tabitem样式的时，Content会被自动加到tabitem中。

使用

 <Grid>

     <TabControl>
         <TabItem Header="WPF三天精通">
             <Border>
                 <TextBlock Text="你好wpf" />
             </Border>
         </TabItem>
         <TabItem Header="ios从入门到精通">
             <Border>
                 <TextBlock Text="你好ios" />
             </Border>
         </TabItem>
         <TabItem Header="Swift性能调优">
             <Border>
                 <TextBlock Text="你好Swift" />
             </Border>
         </TabItem>
         <TabItem Header="Android高级技能">
             <Border>
                 <TextBlock Text="你好Android" />
             </Border>
         </TabItem>

     </TabControl>

 </Grid>