WPF TabItem 样式美化

WPF TabItem 是用来创建选项卡的控件，可以用来切换不同的内容区域。在默认情况下，TabItem 的样式比较简单，但是我们可以通过自定义样式来美化 TabItem，使其更加符合我们的设计需求。

以下是一个简单的 TabControl，其中包含两个 TabItem：

<TabControl>
    <TabItem Header="Tab 1">
        <TextBlock Text="Content of Tab 1" />
    </TabItem>
    <TabItem Header="Tab 2">
        <TextBlock Text="Content of Tab 2" />
    </TabItem>
</TabControl>

现在我们来美化 TabItem 的样式。首先，我们需要创建一个新的样式，可以在 Window 或 UserControl 的 Resources 中添加：

<Style x:Key="TabItemStyle" TargetType="TabItem">
    <Setter Property="Background" Value="White" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Border BorderBrush="Black" BorderThickness="1,1,1,0" Margin="0,0,2,0">
                    <ContentPresenter x:Name="ContentSite"
                                      VerticalAlignment="Center"
                                      HorizontalAlignment="Center"
                                      ContentSource="Header"
                                      Margin="12,2,12,2"
                                      RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="White" />
                        <Setter TargetName="ContentSite" Property="TextBlock.FontWeight" Value="Bold" />
                        <Setter Property="Background" Value="Blue" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter Property="Panel.ZIndex" Value="90" />
                        <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="Black" />
                        <Setter TargetName="ContentSite" Property="TextBlock.FontWeight" Value="Normal" />
                        <Setter Property="Background" Value="White" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="LightGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

上面的样式定义了 TabItem 的背景、前景、字体大小、边框等属性，同时定义了 TabItem 的模板。模板中包含一个 Border 控件，用来显示 TabItem 的边框。在 Border 中，我们使用 ContentPresenter 来显示 TabItem 的 Header。ContentPresenter 是一个特殊的控件，它可以在模板中显示绑定的内容，并且可以根据内容的类型自动选择相应的模板。

在样式的 Triggers 中，我们定义了 TabItem 的不同状态下的样式。当 TabItem 被选中时，背景色变为蓝色，字体颜色变为白色，字体加粗。当 TabItem 没有被选中时，背景色变为白色，字体颜色变为黑色，字体不加粗。当鼠标移动到 TabItem 上时，背景色变为浅灰色。

现在我们只需要将样式应用到 TabControl 中的 TabItem 上，就可以看到美化后的效果：

<TabControl>
    <TabItem Header="Tab 1" Style="{StaticResource TabItemStyle}">
        <TextBlock Text="Content of Tab 1" />
    </TabItem>
    <TabItem Header="Tab 2" Style="{StaticResource TabItemStyle}">
        <TextBlock Text="Content of Tab 2" />
    </TabItem>
</TabControl>

通过自定义样式，我们可以轻松地美化 WPF TabItem 的外观，使其更加符合我们的设计需求。