0

I want to style my TabControl to have items similar to this: enter image description here

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: enter image description here

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

1 Answer 1

3

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:

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.