WPF的选项卡按钮

作者：孙英鹏  撰写时间：2019年7月16日

当我们点击某个页面时，它的头顶上方会有一个选项卡按钮，会有页面名称，关于它们是怎么写的，来看一下。
第一步: 关于选项卡是本身没有关闭按钮的，所以我们要重构它，打开Visual Studio软件，创建一个用户控件页面给它一个名字，把用户控件的UserControl名称改为TabItem，因为我们要重构的是TabItem。然后右键点击查看代码转到后面，也把名字改了（看图1）。

图1：

第二步：重构模板。首先给页面一个Loaded的事件，然后在重构，重构的时候要注意一下，由于它本身就是一个控件并不是顶级元素，里面是不可以接受子节点。接下来就来定义资源和样式，在资源里面编写边框和背景，给它一个正方形绘图和一个定义触发器，在样式里面就写边框色、背景色和字体，写的时候要注意，样式是给谁指定，要指定的一定要指定，不然后面用不了。

代码：

<TabItem.Resources>
    <!--按钮样式：用x:Key设置唯一键-->
    <Style x:Key="CloseButtonStyle" TargetType="{x:Type Button}">
        <!--边框：黑色-->
        <Setter Property="BorderBrush" Value="Black"></Setter>
        <!--背景：白色-->
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <!--自定义模板-->
                <ControlTemplate TargetType="{x:Type Button}">
                    <!--定义视觉树-->
                    <Grid>
                        <!--形状绘图：正方形-->
                         <Rectangle Width="15" Height="15" 
HorizontalAlignment="Center" VerticalAlignment="Center" 
Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                        
                        <TextBlock x:Name="text" FontSize="10" Text="X" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    </Grid>
                    <!--定义触发器-->