How can I add a separator between tabs in a tabcontrol?

Question

I'm styling my tabs so that it just displays the header text but I want to add a separator between them. Right now the tabs look like:

Content1 Content2

Is there a way I can add a Separator between the tabs so that it looks like:

Content1 | Content2

I can already style a vertical separator like that but I can't figure out how to place it in between the tabs. I don't want to use a tab border to fake a divider and I would like to stay away from using
<TabItem Header="|" IsEnabled="False" /> to fake it too. Is there an elegant solution for this?

This is what I have so far:

<TabControl Background="Transparent" BorderThickness="0">
    <TabItem Header="Content1">
        <!--content1-->
    </TabItem>
    <TabItem Header="Content2">
        <!--content2-->
    </TabItem>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border Margin="2,0">
                            <ContentPresenter ContentSource="Header" Margin="10,2" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter Property="Foreground" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>
</TabControl>

Thanks in advance!

Answer 1

For anyone who came here too to see the possible answer (like me).
I did it this way:

In your Resources define three styles

Style 1 (with both separators):

<Style TargetType="TabItem" x:Key="TabItemWithBothSeparators">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderBrush="DarkGray" BorderThickness="1,0">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

Style 2 (with left separator):

<Style TargetType="TabItem" x:Key="TabItemWithLeftSeparator">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Border BorderBrush="DarkGray" BorderThickness="1,0,0,0">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

Style 3 (without separators):

<Style TargetType="TabItem" x:Key="TabItemWithoutSeparators">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                        <Grid Name="Panel">
                            <ContentPresenter x:Name="ContentSite" ContentSource="Header" />
                        </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

Then set the styles this way (code example below):

• On odd TabItems count (1,3,5,7,...) set style to TabItemWithoutSeparators
• On even TabItems count (2,4,6,8,...) set style to TabItemWithBothSeparators
• When your last TabItem count is even, set its style to TabItemWithLeftSeparator otherwise set to TabItemWithoutSeparators

Example with even TabItems count

<TabItem Header="Item 1" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 1-->
</TabItem>
<TabItem Header="Item 2" Style="{StaticResource TabItemWithBothSeparators}">
    <!--content 2-->
</TabItem>
<TabItem Header="Item 3" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 3-->
</TabItem>
<TabItem Header="Item 4" Style="{StaticResource TabItemWithLeftSeparator}">
    <!--content 4-->
</TabItem>

Example with odd TabItems count

<TabItem Header="Item 1" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 1-->
</TabItem>
<TabItem Header="Item 2" Style="{StaticResource TabItemWithBothSeparators}">
    <!--content 2-->
</TabItem>
<TabItem Header="Item 3" Style="{StaticResource TabItemWithoutSeparators}">
    <!--content 3-->
</TabItem>

Hope, this helps! Fore sure there is a more elegant way to get this separators...

Answer 2

I ended up just going with this:

<TabItem IsEnabled="False" IsHitTestVisible="False">
    <TabItem.Header>
        <Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" Height="10" Background="Black" />
    </TabItem.Header>
</TabItem>