WPF

Question

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

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

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

代码

(只是copy-paste变成了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>

如果你 select Tab 1 你会注意到 header 中的蓝线和绿色网格之间有 15px 的距离。
如果你 select 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>

WPF - TabItem 中的 "Padding" 或 header 与内容之间的距离

WPF - "Padding" in TabItem or a distance between header and content

padding

tabitem

wpf-style

代码