Question

我是WPF的新手，我正在尝试调整tabItem的样式，具体取决于是否选中了标签。我在网上发现了一段代码，我知道触发器中的样式是否正确应用，具体取决于是否选中了标签。

首先，我想要的风格如下：

现在，该样式适用于此XAML（此处没有触发器）：

<Window x:Class="DevelopmentConfigurator.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DevelopmentConfigurator"
        mc:Ignorable="d"
        Title="Development Configurator" Height="350" Width="525">

    <Window.Resources>
        <Style x:Key="activeTabStyle" TargetType="TabItem">
            <Setter Property="Foreground" Value="#FF0067CD"></Setter>
            <Setter Property="FontWeight" Value="Bold"></Setter>
            <Setter Property="Height" Value="35"></Setter>
        </Style>

        <Style x:Key="inactiveTabStyle" TargetType="TabItem">
            <Setter Property="Foreground" Value="White"></Setter>
        </Style>

    </Window.Resources>


    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="467*"/>
        </Grid.ColumnDefinitions>



        <TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2">
            <TabItem Header="TabItem" Style="{StaticResource activeTabStyle}">
                <TabItem.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FFF3F3F3" Offset="0"/>
                        <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                        <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </TabItem.Background>
                <Grid Background="#FFE5E5E5" Margin="0,0,0,21"/>
            </TabItem>
            <TabItem Header="TabItem" Foreground="White" RenderTransformOrigin="0.5,0.5">
                <TabItem.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="0.527"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </TabItem.RenderTransform>
                <TabItem.Background>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#FF00A0E8" Offset="0"/>
                        <GradientStop Color="#FF0067CD" Offset="1"/>
                        <GradientStop Color="#FFDDDDDD" Offset="1"/>
                        <GradientStop Color="#FFCDCDCD" Offset="1"/>
                    </LinearGradientBrush>
                </TabItem.Background>
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </TabControl>

    </Grid>
</Window>

现在，由于我需要使用触发器，我尝试了以下代码，但是我无法让后台处于非活动状态的选项卡：

<Window x:Class="DevelopmentConfigurator.MainWindow"
        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"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DevelopmentConfigurator"
        mc:Ignorable="d"
        Title="Development Configurator" Height="350" Width="525">


    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="467*"/>
        </Grid.ColumnDefinitions>  

        <TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid Name="Panel" Background="White">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Foreground" Value="#FF0067CD"></Setter>
                                        <Setter Property="FontWeight" Value="Bold"></Setter>
                                        <Setter Property="Height" Value="35"></Setter>

                                        <Setter Property="Background">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FFF3F3F3" Offset="0"/>
                                                    <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
                                                    <GradientStop Color="#FFDDDDDD" Offset="0.5"/>
                                                    <GradientStop Color="White" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>

                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter Property="Foreground" Value="White"></Setter>
                                        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>

                                        <Setter Property="RenderTransform">
                                            <Setter.Value>
                                                <TransformGroup>
                                                    <ScaleTransform/>
                                                    <SkewTransform/>
                                                    <RotateTransform Angle="0.527"/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </Setter.Value>
                                        </Setter>

                                        <Setter Property="Background">
                                            <Setter.Value>
                                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                    <GradientStop Color="#FF00A0E8" Offset="0"/>
                                                    <GradientStop Color="#FF0067CD" Offset="1"/>
                                                    <GradientStop Color="#FFDDDDDD" Offset="1"/>
                                                    <GradientStop Color="#FFCDCDCD" Offset="1"/>
                                                </LinearGradientBrush>
                                            </Setter.Value>
                                        </Setter>

                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

            </TabControl.Resources>
            <TabItem Header="Packages">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Updates" />
            <TabItem Header="EnvironmentVariables" />
        </TabControl>

    </Grid>
</Window>

我获得的结果如下：

如您所见，白色已成功应用，但背景并非如此。我猜这可能是与这段代码相关的语法问题：

<Trigger Property="IsSelected" Value="False">
    <Setter Property="Foreground" Value="White"></Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>

    <Setter Property="RenderTransform">
        <Setter.Value>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="0.527"/>
                <TranslateTransform/>
            </TransformGroup>
        </Setter.Value>
    </Setter>

    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FF00A0E8" Offset="0"/>
                <GradientStop Color="#FF0067CD" Offset="1"/>
                <GradientStop Color="#FFDDDDDD" Offset="1"/>
                <GradientStop Color="#FFCDCDCD" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>

</Trigger>

为了在标签处于非活动状态时按需要显示背景，我应该更改什么？

Answer 1

由于你覆盖ControlTemplate的{{1}}给它一个新的可视树/外观，你必须指定更改其TabItem是什么意思，哪个元素在新的可视化树代表背景。

我认为它是名为Background的最外面的Grid。将其更改为此，它将起作用：

Panel

WPF - 无法使用触发器实现tabItem样式设计

1 个答案: