Question

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

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

ScreenShot

我有以下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 MarkUp

<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>

WPF标签样式

2 个答案: