WPF控件研究之TabControl
TabControl和TabItem一般都是组合起来使用的，要想灵活运用，首先就得了解清楚他们的默认样式，然后在上面做修改。如何找到一个控件的默认样式呢？这里使用到工具Blend4，它能够把控件的默认样式赤果果地呈现在你眼前。
今天我们就来做出如下样式
一眼看上去，被选中的TabItem好像很复杂的样子，其实，也就是一张背景图而已，这张背景图的制作可以用Design4来完成，使用基本路径+钢笔，很容易能够做出这样的效果
然后就是在tabcontrol中修改默认样式
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="TabControl研究.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480"> <Window.Resources> <!--tabcontrol的style--> <LinearGradientBrush x:Key="background" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF006691" Offset="1"/> <GradientStop Color="White"/> </LinearGradientBrush> <Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}"> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect/> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabControl}"> <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> <Grid.RowDefinitions> <RowDefinition x:Name="RowDefinition0" Height="Auto"/> <RowDefinition x:Name="RowDefinition1" Height="*"/> </Grid.RowDefinitions> <Border Grid.Row="0" CornerRadius="7,7,0,0" Background="{StaticResource background}"> <TabPanel x:Name="HeaderPanel" IsItemsHost="true" Margin="2,2,2,0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/> </Border> <Border Grid.Row="1" x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="Transparent"/> <SolidColorBrush x:Key="ButtonNormalBackground" Color="Transparent"/> <SolidColorBrush x:Key="TabItemHotBackground" Color="Transparent"/> <SolidColorBrush x:Key="TabItemSelectedBackground" Color="Transparent"/> <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="Transparent"/> <SolidColorBrush x:Key="TabItemDisabledBackground" Color="Transparent"/> <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="Transparent"/> <Style TargetType="{x:Type TabItem}"> <Setter Property="Foreground" Value="Black"/> <Setter Property="Padding" Value="6,1,6,1"/> <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/> <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid SnapsToDevicePixels="true" Margin="5"> <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="10,5,10,15"> <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/> </Trigger> <Trigger Property="IsSelected" Value="true"> <Setter Property="Panel.ZIndex" Value="1"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Background" TargetName="Bd"> <Setter.Value> <VisualBrush> <VisualBrush.Visual> <Image Source="background.png"/> </VisualBrush.Visual> </VisualBrush> </Setter.Value> </Setter> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="false"/> <Condition Property="IsMouseOver" Value="true"/> </MultiTrigger.Conditions> <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/> </MultiTrigger> <Trigger Property="TabStripPlacement" Value="Bottom"> <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/> </Trigger> <Trigger Property="TabStripPlacement" Value="Left"> <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/> </Trigger> <Trigger Property="TabStripPlacement" Value="Right"> <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true"/> <Condition Property="TabStripPlacement" Value="Top"/> </MultiTrigger.Conditions> <Setter Property="Margin" Value="-2,-2,-2,-1"/> <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true"/> <Condition Property="TabStripPlacement" Value="Bottom"/> </MultiTrigger.Conditions> <Setter Property="Margin" Value="-2,-1,-2,-2"/> <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true"/> <Condition Property="TabStripPlacement" Value="Left"/> </MultiTrigger.Conditions> <Setter Property="Margin" Value="-2,-2,-1,-2"/> <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true"/> <Condition Property="TabStripPlacement" Value="Right"/> </MultiTrigger.Conditions> <Setter Property="Margin" Value="-1,-2,-2,-2"/> <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/> </MultiTrigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/> <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid x:Name="LayoutRoot"> <TabControl Style="{DynamicResource TabControlStyle1}" Margin="10"> <TabItem Header="TabItem1"> <Label Content="test1"> </Label> </TabItem> <TabItem Header="TabItem2"> <Label Content="test2"></Label> </TabItem> <TabItem Header="TabItem3"> <Label Content="test3"></Label> </TabItem> </TabControl> </Grid> </Window>
注意：不要看到多就以为很复杂，其实多数都是原来的默认样式，修改的地方对比一下就可以知道，我会在后面附上源码，喜欢的同学可以同我一起研究下
https://files.cnblogs.com/HelloMyWorld/TabControl%E7%A0%94%E7%A9%B6.rar
