I want to style my TabControl to have items similar to this:
I tried to the combination of Border (with right thickness of 0) and triangle shaped polygon with pushing the polygon out of bound a bit to overlap, but its not really working as the out of bounds part of polygon gets hidden. Here is my attempt and now I am stuck and don't really know what else to try:
<!-- Styles -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="15 0 15 0" />
<Setter Property="Background" Value="#f5f5f5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid ClipToBounds="False">
<Border x:Name="PART_Border"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderThickness="1 1 0 1"
BorderBrush="LightGray">
<ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
</Border>
<Polygon Points="0,0 20,25, 0,50"
Stroke="#e8e8e8"
Fill="#ffffff"
HorizontalAlignment="Right"
Margin="0 0 -10 0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="#ffffff" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Content -->
<TabControl>
<TabItem Header="First" />
<TabItem Header="Second" />
<TabItem Header="Third" />
</TabControl>