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