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 的外观，使其更加符合我们的设计需求。