WPF如何在TabItem样式中实现Header与内容区域15px间距

解决方案 #

直接设置TabControl的Padding属性为0,15,0,0即可实现全局复用的间距效果，无需修改每个TabItem的内容配置。

实现逻辑 #

WPF原生TabControl的默认模板中，内容区域的ContentPresenter边距默认绑定了TabControl自身的Padding属性，该属性专门用来控制Header栏和内容区域的间距。你之前给TabItem设置Padding不生效，是因为TabItem的Padding仅作用于其Header内部的内容边距，和整体内容区域无关。

修改后可直接运行的代码 #

仅需在原有代码的TabControl标签上添加Padding属性，无需调整其他样式，也不需要给单个TabItem的内容加Margin：

<Border BorderBrush="Black" BorderThickness="1">
    <!-- 仅新增Padding属性即可 -->
    <TabControl BorderThickness="0" Padding="0,15,0,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">
            <Grid Background="Lime" />
        </TabItem>

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

全局复用配置 #

如果需要所有TabControl都默认带该间距，把Padding配置写入TabControl的全局样式即可：

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Padding" Value="0,15,0,0"/>
    <!-- 其他TabControl全局配置可写在这里 -->
</Style>

特殊情况兼容 #

如果上述方法不生效，说明你之前重写了TabControl的模板且没有绑定Padding属性，只需要在自定义的TabControl模板中，找到承载内容的ContentPresenter，添加Margin="{TemplateBinding Padding}"配置，之后再用上面的方法设置Padding即可生效。

内容的提问来源于stack exchange，提问作者Mc_Topaz