WPF如何自定义TabControl控件样式示例详解

2019-12-30 19:18:56刘景俊

即使这样设置了,TabControl的标题还是很丑,这个时候就需要通过设置TabItem来更改标题样式了。

TabItem样式如下:


<Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
  <Setter Property="Foreground" Value="White"/>
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="BorderBrush" Value="#FFACACAC"/>
  <Setter Property="Margin" Value="0"/>
  <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" Background="Transparent">
    <TextBlock x:Name="txt" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Header}" ToolTip="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" TextTrimming="CharacterEllipsis" />
   </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 Property="Foreground" TargetName="txt" Value="#fffea1"/>
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
     <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
     <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Left"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="Opacity" TargetName="templateRoot" Value="0.56"/>
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
     <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
     <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Bottom"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="Opacity" TargetName="templateRoot" Value="0.56"/>
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
     <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
     <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Right"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="Opacity" TargetName="templateRoot" Value="0.56"/>
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
     <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
     <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type TabControl}}}" Value="Top"/>
    </MultiDataTrigger.Conditions>
    <Setter Property="Opacity" TargetName="templateRoot" Value="0.56"/>
    </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 Property="Foreground" TargetName="txt" Value="#fffea1"/>
    </MultiDataTrigger>
   </ControlTemplate.Triggers>
   </ControlTemplate>
  </Setter.Value>
  </Setter>
 </Style>