WPF - TabItem 中的“填充”或标题和内容之间的距离

Question

我有一个带有一堆 TabItem 的 TabControl。
在 TabItem 的 header 和 TabItem 的内容之间，我希望有 15px 的距离。

• 我尝试了 TabItem 的 Padding 属性并将其设置为 (0,15,0,0)。但这没有用。
• 我尝试设置 TabItem 的 Template 属性，但不知道如何设置距离。

我找到的唯一解决方案是在 TabItem 中的第一个控件上设置边距。
但我不喜欢那个解决方案，因为我必须在每个 TabItem 中实现它。
我想要一个风格的解决方案，这样我就可以为每个 TabItem 重用该风格。

代码

（只需复制粘贴到窗口中）

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

• 如果您选择Tab 1，您会注意到标题中的蓝线与绿色网格之间的距离为 15 像素。
• 如果您选择Tab 2，您将看不到蓝线和红网格之间的距离。

有没有更好的方法以某种方式将 15px 的距离包含到样式中？

Answer 1

你不能简单地为ControlTemplate中的Border元素添加一个底部边距吗？：

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