I have a TabControl with a bunch of TabItems.
Between the TabItem's header and the content of the TabItem, I would like to have a distance of 15px.

• I tried the TabItem's Padding property and set it to (0,15,0,0). But that didn't work.
• I have tried to to set the TabItem's Template property but couldn't figure out how to set the distance.

The only solution I have found is to set a margin on the first control in the TabItem.
But I don't like that solution due to I have to implement that in each TabItem.
I would like a solution in a style so I can reuse the style for each TabItem instead.

Code

(Just copy-paste into a Window)

<Border BorderBrush="Black" BorderThickness="1">

    <TabControl BorderThickness="0">
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}" x:Key="TabItemStyle">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Label x:Name="TabItemHeaderLabel"
                                   Foreground="Orange"
                                   FontSize="18"
                                   VerticalAlignment="Center"
                                   HorizontalAlignment="Center"
                                   Content="{Binding}" />
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="True">
                                    <Setter TargetName="TabItemHeaderLabel" Property="Foreground" Value="Blue"/>
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Border x:Name="Chrome"
                                    BorderBrush="Blue" 
                                    Background="Transparent">
                                <ContentPresenter ContentSource="Header"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Selector.IsSelected" Value="True">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,3"/>
                                </Trigger>
                                <Trigger Property="Selector.IsSelected" Value="False">
                                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,0"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <!-- TabItem 1-->
        <TabItem Style="{DynamicResource TabItemStyle}"
                 Header="Tab 1">

            <!-- Notice the margin -->
            <Grid Margin="0,15,0,0"
                  Background="Lime" />
        </TabItem>

        <-- TabItem 2-->
        <TabItem Style="{DynamicResource TabItemStyle}"
                 Header="Tab 2">
            <Grid Background="Red" />
        </TabItem>

    </TabControl>
</Border>

• If you select the Tab 1 you will notice a distance of 15px between the blue line in the header and the green Grid.
• If you select the Tab 2 you will not see a distance between the blue line and the red grid.

Is there a better way to include the distance of 15px into the style in someway?

CodePudding user response：

Can't you simply add a bottom margin to the Border element in the ControlTemplate?:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabItem}">
            <Border x:Name="Chrome"
                    BorderBrush="Blue" 
                    Background="Transparent"
                    Margin="0,0,0,15">
                <ContentPresenter ContentSource="Header"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="Selector.IsSelected" Value="True">
                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,3"/>
                </Trigger>
                <Trigger Property="Selector.IsSelected" Value="False">
                    <Setter TargetName="Chrome" Property="BorderThickness" Value="0,0,0,0"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>