WPF TabControl header spacing, keyboard focus rectangle doesn't line up

Question

I'm setting ControlTemplates to space out TabItems, but the keyboard focus rectangle doesn't align anymore:

Anyone know an easy way to fix this?

Here's the simplified sample code:

<TabControl x:Name="tabControl">
    <TabControl.Resources>
        <ControlTemplate x:Key="tabItemTemplate"
                         TargetType="{x:Type TabItem}">
            <Grid x:Name="templateRoot" Margin="0,0,40,0">
                <Border BorderBrush="LightGray"
                        BorderThickness="1"/>
                <ContentPresenter ContentSource="Header"
                                  Margin="10,5"/>
            </Grid>
        </ControlTemplate>
    </TabControl.Resources>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
    <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}"/>
</TabControl>

Answer 1

Easiest way I found is to customize the FocusVisualStyle and give it a margin similar to what was used to space out the tabs.

Example:

<TabControl x:Name="tabControl">
    <TabControl.Resources>
        <Style x:Key="tabItemStyle" TargetType="TabItem">
            <Setter Property="FocusVisualStyle">
                <Setter.Value>
                    <Style>
                        <Setter Property="Control.Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Rectangle Margin="2,2,42,2" SnapsToDevicePixels="True"
                                            Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                                            StrokeDashArray="1 2" StrokeThickness="1" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid x:Name="templateRoot" Margin="0,0,40,0">
                            <Border BorderBrush="LightGray" BorderThickness="1" />
                            <ContentPresenter Margin="10,5" ContentSource="Header" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
    <TabItem Header="TabItem" Style="{StaticResource tabItemStyle}" />
</TabControl>

That custom FocusVisualStyle is a modified version of the default (I adjusted the margin), which I extracted from a dummy TabItem via the Properties Window:

Answer 2

try to make the grid focusable and the tabItem not a tab stop.

   <TabControl x:Name="tabControl">
            <TabControl.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="IsTabStop" Value="False"/>
                </Style>
            </TabControl.ItemContainerStyle>
            <TabControl.Resources>
                <ControlTemplate x:Key="tabItemTemplate"
            TargetType="{x:Type TabItem}">
                    <Grid x:Name="templateRoot" Margin="0,0,40,0" Focusable="True">
                        <Border BorderBrush="LightGray"
                        BorderThickness="1"/>
                        <ContentPresenter ContentSource="Header"
                                  Focusable="False"
                                  Margin="10,5"/>
                    </Grid>
                </ControlTemplate>
            </TabControl.Resources>
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
        <TabItem Header="TabItem" Template="{StaticResource tabItemTemplate}" />
    </TabControl>