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>

CodePudding user response：

This will do the job for you:

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="#f5f5f5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Path x:Name="Back" Data="M0,0 L 80,0 L100,20 L80,40 L0,40 L 20,20 " Stretch="None" VerticalAlignment="Stretch"
                              Stroke="#e8e8e8" StrokeThickness="2"
                              Fill="{TemplateBinding Background}"
                              HorizontalAlignment="Stretch" Margin="-30,0,0,0"/>
                        <ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Back" Property="Fill" Value="#ffffff" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Instead of the border and polygon I used a Path to draw the shape for you.

You can use - (minus) values in margins to overlap items.

Result: