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

Posted 2023-03-06

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

【英文标题】：WPF - "Padding" in TabItem or a distance between header and content

【发布时间】：2022-01-07 02:23:58

【问题描述】：

我有一个带有一堆 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 的距离包含到样式中？

【参考方案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>

【讨论】：

其实我碰巧遇到了和你一样的解决方案。我会把你的建议作为解决方案。