[SOLVED] Removing border around TabItems in TabControl

Issue

I’m trying to style a WPF TabControl, so the 2 pixel border around the TabItems is removed (see the red area around the TabItems in the attached screenshot):

<TabControl TabStripPlacement="Left" SelectedIndex="1">

    <TabControl.Resources>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background" Value="Red" />
            <Setter Property="Margin" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="Margin" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabControl}">
            <Setter Property="Background" Value="Black"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Background" Value="Pink"/>
            <Setter Property="BorderBrush" Value="White"/>
            <Setter Property="BorderThickness" Value="5"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="OuterBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                            <ContentPresenter ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="1 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="2 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

    <TabItem Width="80" Height="40" Header="Text" >
        <TextBlock Text="3 Future Content..." VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Pink" Foreground="Black" />
    </TabItem>

</TabControl>

Does anyone know what to style a TabControl so the TabItems fills the "tab item areas"? I.e., without 2 pixel border?

Or, a different way to achieve the same look?

Solution

There are some hardcoded margins for the TabPanel in the default template of the TabControl that you need to remove (see the last <Setter> in the <Trigger Property="TabStripPlacement" Value="Left"> element of the default template below):

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="ColumnDefinition0"/>
                        <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                        <RowDefinition x:Name="RowDefinition1" Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                    <Border x:Name="contentPanel" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                        <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="TabStripPlacement" Value="Bottom">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
                        <Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Left">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        <!--<Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>-->
                        <Setter Property="Margin" TargetName="headerPanel" Value="0"/>
                    </Trigger>
                    <Trigger Property="TabStripPlacement" Value="Right">
                        <Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
                        <Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
                        <Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
                        <Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
                        <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
                        <Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
                        <Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
                        <Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answered By – mm8

Answer Checked By – Senaida (BugsFixing Volunteer)