WPF tab control spacing between headers

Question

The default behavior of the WPF Tabcontrol is to place the Tab Headers adjacent to each other, without any empty space in between. What if I wanted to specify a gap between the headers? Do I have to define a control template for this? I'm relatively new to WFP and any help is appreciated.

Thanks

Azov

Answer 1

I believe you will need to define a custom control template for the TabItem, maybe even one for the TabControl. Here is an example of a TabItem that uses a spacer for some separation.

<Style
    x:Key="SpacedTab"
    TargetType="{x:Type TabItem}">
    <Setter
        Property="Template">
        <Setter.Value>
            <ControlTemplate
                TargetType="{x:Type TabItem}">
                <Border
                    x:Name="Spacer"
                    Width="Auto"
                    Height="Auto"
                    Padding="0 0 5 0"
                    Margin="0 0 0 0"
                    BorderBrush="Transparent"
                    BorderThickness="0">
                    <Border
                        x:Name="Border"
                        MinWidth="150"
                        Width="Auto"
                        Height="30"
                        Background="Gray"
                        BorderBrush="DarkGray"
                        BorderThickness="0,0,0,0"
                        CornerRadius="6,6,0,0"
                        Cursor="Hand"
                        VerticalAlignment="Bottom">
                        <ContentPresenter
                            x:Name="ContentSite"
                            TextElement.FontSize="10pt"
                            TextElement.FontFamily="Arial"
                            TextElement.Foreground="Black"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            ContentSource="Header"
                            Margin="8,3,8,3"
                            Width="Auto"
                            Height="Auto" />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Hopefully that is a nudge in the right direction; you will still need to add that as a style resource and reference it from your TabControl -> TabItem.

Distort

Answer 2

It is easy to add space by doing it in the designer. Select the Tab you want to move, by starting with the rightmost tab. Then hold ctrl and use the right arrow key to move the tab to the right. Do the same with the rest of the tabs. Then you can manually adjust the margin in the xaml code.

Intact

No need for a designer. Cumulative margins in code work also so [tab] space [tab][tab] space [tab] would have left&right margins of 0 for the first tab, then x for the second two tabs and 2x for the last tab where x is the width of "space" – Splenomegaly