如何删除每个 TabItem 旁边的白线? [英] How do I remove the white lines beside each TabItem?

问题描述

我最近开始为一个项目学习 WPF.我一直在为 TabControl 设计样式以适应我正在使用的组件库的颜色，但是这些奇怪的白线出现在每个 TabItem 旁边，但仅在项目之间或在第一项之前.

I've recently taken to learning WPF for a project. I've been styling a TabControl to fit the colors of a component library I'm using, but these strange white lines have appeared beside each TabItem, but only between items or before the first item.

它们是什么，我该如何摆脱它们?我尝试使用 Visual Studio 中提供的检查器，但它们不可选择，这让我相信它们是 TabItem 的某些内部部分，但我在这一点上被卡住了.

What are they, and how can I get rid of them? I tried using the inspector provided in Visual Studio but they aren't selectable, which leads me to believe they are some internal part of TabItem, but I'm stuck at this point.

用法:

<TabControl Grid.Row="1"
            TabStripPlacement="Bottom"
            BorderBrush="#00000000"
            BorderThickness="0"
            Resources="{StaticResource TabControlResources}">
    <TabItem Header="Story">
        <local:Workspace />
    </TabItem>
    <TabItem Header="Test">
        Test Tab
    </TabItem>
    <TabItem Header="Test">
        Test Tab 2
    </TabItem>
</TabControl>

和样式定义:

<ResourceDictionary x:Key="TabControlResources">
    <Style TargetType="TabControl">
        <Setter Property="Background"
                Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}"/>
        <Setter Property="Foreground"
                Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
    </Style>
    <Style TargetType="TabItem">
        <Setter Property="Foreground"
                Value="{StaticResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background"
                        Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabControl.Background}" />
            </Trigger>
            <Trigger Property="IsSelected" Value="False">
                <Setter Property="Background"
                        Value="{StaticResource Fluent.Ribbon.Brushes.RibbonTabItem.Active.Background}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

推荐答案

那些是 TabItem 的一部分.您可以在资源中的选项卡项样式中添加 setter 来完成这项工作:

Those are part of the TabItem. You can add the setter in the tab item style within your resource which should do the job:

<Style TargetType="{x:Type TabItem}">
    <Setter Property="BorderBrush" Value="Red"/>
</Style>

结果是这样的:

或者:

您可以完全删除它，但不幸的是它是模板的一部分，必须修改模板:

You can completely remove it, but unfortunately it is part of the template and the template has to be modified:

在 Visual Studio 设计器中，右键单击选项卡项之一，然后转到编辑模板"，然后转到编辑副本".

In Visual studio designer right click on one of the tab items and go to "Edit template" then "Edit a copy".

 <Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="{x:Type TabItem}">
          <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
               <Border x:Name="mainBorder" BorderBrush="Red" BorderThickness="0" Background="{TemplateBinding Background}" Margin="0">
                    <Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="0" Background="{StaticResource TabItem.Selected.Background}" Margin="-1" Opacity="0"/>
               </Border>
               <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
          </Grid>

在那里你必须将mainBorder和innerBoarder的BorderThichness修改为BorderThickness="0"

In there you have to modify the BorderThichness of mainBorder and innerBoarder to BorderThickness="0"

结果:

这篇关于如何删除每个 TabItem 旁边的白线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！