Как убрать белые линии рядом с каждым TabItem?

Question

Я недавно начал изучать WPF для проекта. Я стилизовал TabControl, чтобы он соответствовал цветам библиотеки компонентов, которую я использую, но эти странные белые линии появились рядом с каждым TabItem, но только между элементами или перед первым элементом.

Кто они и как от них избавиться? Я попытался использовать инспектор, предоставленный в Visual Studio, но их нельзя выбрать, что заставляет меня думать, что они являются какой-то внутренней частью TabItem, но я застрял на этом этапе.

Использование:

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

Answer 1

Это часть TabItem. Вы можете добавить сеттер в стиле элемента вкладки в вашем ресурсе, который должен выполнять работу:

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

И результат будет таким:

В качестве альтернативы:

Вы можете полностью удалить его, но, к сожалению, это часть шаблона, и шаблон необходимо изменить:

В Visual Studio Designer щелкните правой кнопкой мыши один из элементов вкладки и go, чтобы «Редактировать шаблон», затем «Редактировать копию».

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

Там вы должны изменить BorderThichness из mainBorder и innerBoarder на BorderThickness="0"

Результат: