如何在TabItems上居中显示标题文本
本文关键字:显示 标题 文本 TabItems | 更新日期: 2023-09-27 18:28:16
我正试图让我的WPF TabItems将其标题文本居中。但是,无论我在ContentPresenter及其包含的Border上设置了HorizontalAlignment和HorizontalAlignment的哪种组合(居中或拉伸),文本始终显示为向左对齐,而不是居中。我也没有在TabItems上看到可以直接在选项卡项本身上设置的属性(事实证明,TabItem上的HorizontalAlignment做了完全不同的事情)。
我现在的代码是:
<Grid TextElement.Foreground="White" TextElement.FontSize="17" TextElement.FontFamily="Times New Roman" HorizontalAlignment="Center" >
<Border Name="TabBorder" BorderThickness="8 8 8 0" CornerRadius="12 12 0 0"
Background="{StaticResource bandBrush}" HorizontalAlignment="Center" >
<ContentPresenter HorizontalAlignment="Stretch" ContentSource="Header" Height="24" Width="100" />
</Border>
</Grid>
您可以将ContentPresenter放在标签中,其中HorizontalAlignment属性设置为Strecth,HorizontalContentAlignment设置为Center,看看这个:
<Grid x:Name="gridTabItem">
<Border x:Name="Border" Margin="0,0,0,0" BorderBrush="{x:Null}" CornerRadius="7,7,0,0" BorderThickness="0" >
<Label x:Name="label" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Stretch"
HorizontalAlignment="Center"
ContentSource="Header" Margin="10,2,10,2"
RecognizesAccessKey="True">
</ContentPresenter>
</Label>
</Border>
<Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="4" Margin="0,41, 0,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" StrokeThickness="0" Fill="{x:Null}"/>
<Rectangle x:Name="rectangle1" HorizontalAlignment="Left" Height="1" Margin="0,43,0,0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="#FFEEEEEE"/>
<Rectangle x:Name="glow" HorizontalAlignment="Left" Height="41" Margin="0" Stroke="{x:Null}" StrokeThickness="0" VerticalAlignment="Top" Width="{Binding ActualWidth, ElementName=gridTabItem}" Fill="{x:Null}"/>
</Grid>
我知道这个问题有点老了,已经有了公认的答案,但我认为我的答案可以帮助别人。
我的问题是,我需要均匀地分布TabItem标题(每个TabItem标题都有相同的宽度),并且标题内的文本需要居中。我就是这样做到的:
选项卡Control.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FMEA.Resources.Styles"
xmlns:Converters="clr-namespace:FMEA.Converters"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">
<Style x:Key="Custom_TabItem" BasedOn="{StaticResource {x:Type TabItem}}" TargetType="{x:Type TabItem}">
<Setter Property="Width">
<Setter.Value>
<MultiBinding>
<MultiBinding.Converter>
<Converters:TabSizeConverter />
</MultiBinding.Converter>
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="tabItem">
<Border x:Name="Border">
<ContentPresenter x:Name="content"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="LightGray" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<Border x:Name="border">
<ContentPresenter>
<ContentPresenter.Content>
<TextBlock Text="{TemplateBinding Content}"
FontSize="22" HorizontalAlignment="Center" />
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
其中TabSizeConverter是这样的:
class TabSizeConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
TabControl tabCtrl = values[0] as TabControl;
double width = tabCtrl.ActualWidth / tabCtrl.Items.Count;
return width <= 1 ? 0 : width - 1;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
用法示例:
<TabItem Header="MyHeader" Style="{StaticResource Custom_TabItem}">