Making tab header flexible to header text on WPF

Question

I'm new to the WPF stuff around and I tried restyling a TabItem myself.

As you people can see the tabs are filling the window's whole width. Unlike my original purpose which I actually wanted to make the tabs width is based on the text inside of it. Like the original style, only redesigned.

My style in code:

<Style x:Key="ZoidTab" TargetType="{x:Type TabItem}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate x:Name="ZoidTemplate" TargetType="{x:Type TabItem}">
                <Border Width="Auto" Height="Auto">
                <Grid x:Name="grid">
                    <Polygon
                        Fill="Turquoise"
                        Points="0,1 0.05,0 0.95,0 1,1"
                        Stretch="Fill"
                        Margin="0,0,0,0"
                    />
                    <ContentPresenter x:Name="tabContent" HorizontalAlignment="Center" ContentSource="Header" VerticalAlignment="Center" TextElement.Foreground="#FFFFFFFF"/>
                </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="FontSize" Value="12pt"/>
</Style>

I'd like to know what is it that I must fix to get the width right... Thank you.

Answer 1

The problem is that your Grid doesn't have a ColumnDefinitions section to limit the size of the one and only column. Modify it to look like this:

<Grid x:Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    ...