WPF TabControl-设置TabItems的样式

在前一章，我们看过了自定义WPF TabControl的选项卡标题有多容易，例如为文本添加图像或颜色。但是，如果您想修改选项卡的外观（包括形状和边框），就需要覆盖TabItem元素的控件模板，虽然这不像WPF的其他区域那样直接，但它仍然可以管理。

所以，您想完全控制TabControl选项卡的外观，请查看下一个示例：

<Window x:Class="WpfTutorialSamples.Misc_controls.StyledTabItemsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyledTabItemsSample" Height="150" Width="250">
    <Grid>
        <TabControl Margin="10" BorderThickness="0" Background="LightGray">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid Name="Panel">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Panel" Property="Background" Value="White" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
    </Grid>
</Window>

正如您所看到的，这使得TabControl看起来有点像Windows 8的风格，没有边框和不太精致的颜色来标记选定的选项卡，未选定的选项卡没有背景。所有这一切都是通过使用Style更改ControlTemplate来实现的。通过添加ContentPresenter 控件，我们指定TabItem的内容应放在何处。我们还有几个触发器，它们根据IsSelected属性控制选项卡的背景颜色。

如果你想要一个不那么精致的外观，它就像更改模板一样简单。例如，你可能想要一个边框，但有圆角和渐变背景 - 没问题！看看下一个例子，我们在那里完成：

<Window x:Class="WpfTutorialSamples.Misc_controls.StyledTabItemsWithBorderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyledTabItemsWithBorderSample" Height="150" Width="250">
    <Grid>
        <TabControl Margin="10" BorderBrush="Gainsboro">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="GhostWhite" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
    </Grid>
</Window>

正如您所看到的，我只是在ContentPresenter周围添加了一个Border控件来实现这种外观的变化。希望这能证明选项卡的自定义样式是多么容易，以及这种技术的无限可能。

标签：WPF