WPF 选项卡样式

Question

我正在尝试设置 WPF TabControl 的样式。我基本上想让选项卡控件具有透明背景，带有白色边框和文本。我希望所选选项卡具有白色背景和透明文本（或任何彩色文本！）。本质上是一个 2 色标签。

但是，我无法覆盖选定的选项卡外观 - 这显示为白色。我的子文本框采用 TabItem 字体的样式。请注意，在屏幕截图中，我的标签有自己的样式集，所以不要使用 TabItem 字体。

我有以下 XAML 来执行此操作。理想情况下，我想创建样式以便在整个应用程序中重复使用。

资源字典

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
  <Style x:Key="Tabs" TargetType="TabControl">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="White"/>
  </Style>
  <Style x:Key="TabItemStyle" TargetType="TabItem">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Background" Value="Transparent"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Background" Value="White"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
                <Setter Property="Foreground" Value="LightGray"/>
                <Setter Property="Background" Value="Transparent"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

然后是 XAML 标记

<TabControl Style="{StaticResource Tabs}">
  <TabItem Header="General" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="Details" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="Info" Style="{StaticResource TabItemStyle}">...</TabItem>
  <TabItem Header="More Stuff..." Style="{StaticResource TabItemStyle}">...</TabItem>
</TabControl>

如何设置标签的样式并防止子级调整大小？

Answer 1

您的DataTriggers 不起作用。要修复它，请将 RelatveSource 更改为 Self

Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}"

但我建议将它们更改为 Triggers，如下所示：

<Style.Triggers>
   <Trigger Property="IsSelected" Value="True">
      <Setter Property="Foreground" Value="Red"/>
      <Setter Property="Background" Value="White"/>
   </Trigger>
   <Trigger Property="IsSelected" Value="False">
      <Setter Property="Foreground" Value="LightGray"/>
      <Setter Property="Background" Value="Transparent"/>
   </Trigger>
</Style.Triggers>

Answer 2

您应该为 TabItem 创建控件模板。

此示例将 TabItem 背景更改为透明，文本颜色更改为白色。

您可以使用自己的颜色模式。

<Window.Resources>
    <Style TargetType="TabControl">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderBrush"
                Value="White" />
    </Style>

    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border"
                                Margin="0,0,-4,0"
                                Background="{x:Static Brushes.White}"
                                BorderBrush="{x:Static Brushes.White}"
                                BorderThickness="1,1,1,1"
                                CornerRadius="2,12,0,0">
                            <ContentPresenter x:Name="ContentSite"
                                              Margin="12,2,12,2"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              ContentSource="Header"
                                              RecognizesAccessKey="True" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected"
                                 Value="True">
                            <Setter Property="Panel.ZIndex"
                                    Value="100" />
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="{x:Static Brushes.Transparent}" />
                            <Setter TargetName="Border"
                                    Property="BorderThickness"
                                    Value="1,1,1,0" />
                            <Setter Property="TextBlock.Foreground"
                                    Value="White" />
                            <!--<Setter Property="TextBlock.Foreground"
                                    Value="Transparent" />-->
                        </Trigger>
                        <Trigger Property="IsEnabled"
                                 Value="False">
                            <Setter TargetName="Border"
                                    Property="Background"
                                    Value="{x:Static Brushes.White}" />
                            <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{x:Static Brushes.White}" />
                            <Setter Property="Foreground"
                                    Value="{x:Static Brushes.White}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid Background="SkyBlue">
    <TabControl Margin="20">
        <TabItem Header="TabItem #1">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
        <TabItem Header="TabItem #2">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
        <TabItem Header="TabItem #3">
            <TextBox>Tab Item #1 content</TextBox>
        </TabItem>
    </TabControl>
</Grid>