[英]WPF - "Padding" in TabItem or a distance between header and content
I have a TabControl with a bunch of TabItems.我有一个带有一堆 TabItems 的 TabControl。
Between the TabItem's header and the content of the TabItem, I would like to have a distance of 15px.在 TabItem 的 header 和 TabItem 的内容之间,我希望有 15px 的距离。
Padding
property and set it to (0,15,0,0).Padding
属性并将其设置为 (0,15,0,0)。 But that didn't work.Template
property but couldn't figure out how to set the distance.Template
属性,但不知道如何设置距离。 The only solution I have found is to set a margin on the first control in the TabItem.我找到的唯一解决方案是在 TabItem 中的第一个控件上设置边距。
But I don't like that solution due to I have to implement that in each TabItem.但我不喜欢那个解决方案,因为我必须在每个 TabItem 中实现它。
I would like a solution in a style so I can reuse the style for each TabItem instead.我想要一个风格的解决方案,这样我就可以为每个 TabItem 重用该风格。
(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>
Tab 1
you will notice a distance of 15px between the blue line in the header and the green Grid.Tab 1
,您会注意到 header 中的蓝线和绿色网格之间的距离为 15px。Tab 2
you will not see a distance between the blue line and the red grid.Tab 2
,您将看不到蓝线和红网格之间的距离。 Is there a better way to include the distance of 15px into the style in someway?有没有更好的方法以某种方式将 15px 的距离包含在样式中?
Can't you simply add a bottom margin to the Border
element in the ControlTemplate
?:你不能简单地在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.