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

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

TabItem样式如下:


<Style x:Key="TabItemExWithUnderLineStyle" 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">
       <Border x:Name="_underline" BorderBrush="#37aefe" BorderThickness="0" Margin="{TemplateBinding Margin}"/>
       <Grid>
        <TextBlock x:Name="txt" Visibility="Visible" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Header}" ToolTip="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" TextTrimming="CharacterEllipsis" />
       </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 Property="Foreground" TargetName="txt" Value="#37aefe"/>
       </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="#37aefe"/>
        <Setter Property="BorderThickness" TargetName="_underline" Value="0 0 0 2"/>
       </MultiDataTrigger>
      </ControlTemplate.Triggers>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>