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

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

至此,样式已经设置完毕,引用示例:


<Grid Background="#858586">
  <TabControl Style="{StaticResource TabControlStyle}" Width="300" Height="200" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
   <TabItem Style="{StaticResource TabItemStyle}" Cursor="Hand" Header="音乐电台" Height="38" >
   <Grid Background="#33ffffff">
    <TextBlock Text="音乐电台" VerticalAlignment="Center" HorizontalAlignment="Center"/>
   </Grid>
   </TabItem>
   <TabItem Style="{StaticResource TabItemStyle}" Cursor="Hand" Header="Mv电台" Height="38" >
   <Grid Background="#33ffffff">
    <TextBlock Text="Mv电台" VerticalAlignment="Center" HorizontalAlignment="Center"/>
   </Grid>
   </TabItem>
  </TabControl>
  </Grid>

效果如下:

wpf,tabcontrol控件,tabcontrol,样式

三、实现TabControl标题居中显示(不平均分布)

同理需要更改TabControl的样式和TabItem的样式。需要把使用TabPanel作为标题的容器,设置HorizontalAlignment为Center;

TabControl的样式如下:


<Style x:Key="TabControlWithUnderLineStyle" TargetType="{x:Type TabControl}">
 <Setter Property="Padding" Value="2"/>
 <Setter Property="HorizontalContentAlignment" Value="Center"/>
 <Setter Property="VerticalContentAlignment" Value="Center"/>
 <Setter Property="Background" Value="White"/>
 <Setter Property="BorderBrush" Value="#FFACACAC"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
 <Setter Property="Template">
  <Setter.Value>
  <ControlTemplate TargetType="{x:Type TabControl}">
   <Grid x:Name="templateRoot" ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
   <Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="ColumnDefinition0"/>
    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
    <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
    <RowDefinition x:Name="RowDefinition1" Height="*"/>
   </Grid.RowDefinitions>
   <TabPanel x:Name="HeaderPanel" HorizontalAlignment="Center" Background="Transparent" Grid.Column="0" IsItemsHost="True" Margin="0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
   <Line X1="0" X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Stroke="Gray" StrokeThickness="0.1" VerticalAlignment="Bottom" Margin="0 0 0 1" SnapsToDevicePixels="True"/>
   <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
    <ContentPresenter x:Name="PART_SelectedContentHost" ContentTemplate="{TemplateBinding SelectedContentTemplate}" Content="{TemplateBinding SelectedContent}" ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" ContentSource="SelectedContent" Margin="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
   </Border>
   </Grid>
   <ControlTemplate.Triggers>
   <Trigger Property="TabStripPlacement" Value="Bottom">
    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
    <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
   </Trigger>
   <Trigger Property="TabStripPlacement" Value="Left">
    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
    <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
    <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
   </Trigger>
   <Trigger Property="TabStripPlacement" Value="Right">
    <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
    <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
    <Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
    <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
    <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
    <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
    <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
    <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
   </Trigger>
   <Trigger Property="IsEnabled" Value="False">
    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
   </Trigger>
   </ControlTemplate.Triggers>
  </ControlTemplate>
  </Setter.Value>
 </Setter>
 </Style>