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

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

主要给大家介绍了关于WPF如何自定义TabControl控件样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面

随着小编来一起学习学习吧。

一、前言一、前言

程序中经常会用到TabControl控件，默认的控件样式很普通。而且样式或功能不一定符合我们的要求。比如：我们需要TabControl的标题能够居中、或平均分布；或者我们希望TabControl的标题能够进

行关闭。要实现这些功能我们需要对TabControl的样式进行定义。

二、实现二、实现TabControl的标题平均分布的标题平均分布

默认的TabControl标题是使用TabPanel容器包含的。要想实现TabControl标题头平均分布，需要把TabPanel替换成UniformGrid；

<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"/>

<Line X1="0" X2="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Stroke="White" 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="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"/>

<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>

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

TabItem样式如下：

<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>

<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 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>