WPF自定义TabControl的样式 原创

这是我第二天写WPF，各种想要的样式还在不停的探索中

对于WPF样式的链接对于我这样的萌新还是有必要记录下

首先需要生成一个样式文件（名字自己起），PS：可以创建一个文件夹，将样式文件全放进去

创建好文件后，将你的样式写进文件

请注意，一定要写对你的NameSpace，例如：xmlns:local="clr-namespace:WpfApp"中 namespace就是WpfApp

<ResourceDictionary
　　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　　xmlns:System="clr-namespace:System;assembly=mscorlib">
　　<Style x:Key="myBtnStyle" TargetType="Button">
　　　　<Setter Property="Height" Value="72" />
　　　　<Setter Property="Width" Value="150" />
　　　　<Setter Property="Foreground" Value="White" />
　　　　<Setter Property="Background" Value="Blue" />
　　　　<Setter Property="HorizontalAlignment" Value="Left" />
　　　　<Setter Property="VerticalAlignment" Value="Top" />
　　</Style>
</ResourceDictionary>

然后还需要在界面的文件中将其引用；即在Windows标签下的Window.Resources中将其引用，且引用必须在所有控件的前，若在控件后引用 ，由于执行循序会找不到Style

<Window 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="WPF-Layout" Height="350" Width="525"
	x:Class="WpfApp.MainWindow">
    <!-- 控件在样式引用前时不对的 ，执行循序会导致找不到样式-->
    <!-- <Grid/> -->
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/MainWindowStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <!-- 控件在引用后面，正确 -->
	<Grid/>
</Window>

然后我们就可以在控件中使用样式了，用Style = "{StaticResource FileName}"来引用，如下

<TabItem Header="TabIt666" Style="{StaticResource TabItem_Style}">
	<Grid Background="#FF009ce1"/>
</TabItem>

使用我们没问题了，下来就是修改TabControl的样式，这里我们不直接修改TabControl，而是改它的TabItem

假如我们只是修改文字和TabItem的大小 我们可以用Canvas

<Canvas Name="canvas" Background="#FF807FFE" Width="65" Height="30">
	<TextBlock HorizontalAlignment="Center"
		   VerticalAlignment="Center"
		   Canvas.Top="8"
		   Text="{TemplateBinding HeaderedContentControl.Header}"
		   Canvas.Left="5">
	</TextBlock>
</Canvas>

假如我们要修改边框，那可以用border

<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="0,7,0,0">
	<Border.Background>#FFDDDDDD</Border.Background>
	<ContentPresenter Content="{TemplateBinding Header}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>

上面两个样式可以直接复制替换，当然也可以扩展，其他的小伙伴们自己探索，下面时我完整的样式代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp">
    <Style x:Key="TabItem_Style">
        <Style.Triggers>

            <Trigger Property="TabItem.IsSelected" Value="True">
                <Setter Property="TabItem.Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="0,7,0,0">
                                <Border.Background>#FF87CEFA</Border.Background>
                                <ContentPresenter Content="{TemplateBinding Header}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="TabItem.FontWeight" Value="Bold"/>
                <Setter Property="TabItem.Foreground" Value="Blue"/>
            </Trigger>

            <Trigger Property="TabItem.IsMouseOver" Value="True">
                <Setter Property="TabItem.Template" >
                    <Setter.Value>
                        <ControlTemplate>
                            <Canvas Name="canvas" Background="#FF6160E2" Width="65" Height="30">
                                <TextBlock HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Text="{TemplateBinding HeaderedContentControl.Header}">
                                </TextBlock>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>

        </Style.Triggers>
    </Style>
</ResourceDictionary>

下面效果图