在选定的 TabItem 上禁用边框和背景更改 wpf

Question

在我的 WPF 文档中我有这个：

<Window.Resources>
    <Style x:Key="SidebarTab" TargetType="TabItem">

        <Setter Property="Foreground"  Value="#303030"></Setter>
        <Setter Property="BorderBrush"  Value="Transparent"></Setter>
        <Setter Property="BorderThickness"  Value="0"></Setter>
        <Setter Property="Background"  Value="#151515"></Setter>

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="{StaticResource PrimaryHueMidBrush}"></Setter>
                <Setter Property="BorderBrush"  Value="Transparent"></Setter>
                <Setter Property="BorderThickness"  Value="0"></Setter>
                <Setter Property="Background"  Value="#151515"></Setter>
            </Trigger>
        </Style.Triggers>

    </Style>
</Window.Resources>

<Border Background="#151515" CornerRadius="20">
    <Grid Margin="23,47,0,0">
        <TabControl TabStripPlacement="Left" Style="{DynamicResource SidebarTabControl}">
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
            <TabItem Style="{DynamicResource SidebarTab}">
                <TabItem.Header>
                    <materialDesign:PackIcon Kind="EmoticonLol" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </TabItem.Header>
            </TabItem>
        </TabControl>
    </Grid>
</Border>

它看起来像这样：

我在 TabItem 上获得了图标颜色变化的预期效果，但 Background 和 BorderBrush（以及 BorderThickness）仍在更改将 "link up" 变成 header 中的内容，这就是我要删除的内容：

我在样式中添加了这样的东西：

 <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Setter Property="Foreground" Value="{StaticResource PrimaryHueMidBrush}"></Setter>
        <Setter Property="BorderBrush"  Value="Transparent"></Setter>
        <Setter Property="BorderThickness"  Value="0"></Setter>
        <Setter Property="Background"  Value="#151515"></Setter>
    </Trigger>
</Style.Triggers>

但是还是不行。有人对如何执行此操作有任何建议吗？

Answer 1

我试过你的样式，我也能得到边框。原因实际上是 TabItem 的默认模板具有边框颜色和厚度，当您定义颜色时，您的属性仍然没有应用到它们。

所以您实际上需要做的是为您的标签项重新定义控件模板。

我通过覆盖 TabItem 的模板属性进行了基本更改，并添加了一些东西并绑定了 BorderThickness、BorderBrush 和背景。

<Style x:Key="SidebarTab" TargetType="TabItem">

        <Setter Property="Foreground"  Value="#303030"></Setter>
        <Setter Property="BorderBrush"  Value="Red"></Setter>
        <Setter Property="BorderThickness"  Value="1"></Setter>
        <Setter Property="Background"  Value="White"></Setter>

        <!--I have added this START-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter ContentSource="Header" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
       <!--I have added this END-->

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="Blue"></Setter>
                <Setter Property="BorderBrush"  Value="Transparent"></Setter>
                <Setter Property="BorderThickness"  Value="0"></Setter>
                <Setter Property="Background"  Value="Yellow"></Setter>
            </Trigger>
        </Style.Triggers>

    </Style>

注意：-我已经更改了上述代码中前景、背景、边框厚度的属性值以进行测试，因为我找不到静态资源。你必须换回你的钥匙。

我希望我已经说明了要点，以便您继续进行下去。试一试，如果您发现任何问题，请告诉我。

在选定的 TabItem 上禁用边框和背景更改 wpf

Disable border and background change on TabItem selected wpf

wpf

xaml

styles

tabcontrol

tabitem