How do I remove the white lines beside each 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.

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.

Usage:

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

And style definition:

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

回答1:

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>

And the result will be such:

Alternatively:

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

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>

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

Result:

来源：https://stackoverflow.com/questions/61336537/how-do-i-remove-the-white-lines-beside-each-tabitem

标签

wpf

xaml