是否可以在 WPF TabControl 中左对齐标题？

Posted 2023-03-05

【中文标题】是否可以在 WPF TabControl 中左对齐标题？

【英文标题】：Is it possible to Left-Align headers in a WPF TabControl?

【发布时间】：2010-11-30 06:21:06

【问题描述】：

现在，我有一个 WPF 窗口，其中 TabControl 的所有选项卡标签都居中。

我希望TabControl 的标签级别左对齐。

如果不完全重做ControlTemplate，这可能吗？

我尝试过使用HorizontalAlignment、HorizontalContentAlignment 等，但我尝试过的都没有达到预期的效果。

如果我尝试这个解决方案（由 T Levesque 提供）：

<TabControl...>
    <TabControl.ItemContainerStyle>
        <Style TargetType="x:Type TabItem">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
    </TabControl.ItemContainerStyle>
    ...
</TabControl>

...我明白了：

TabControl 的所有标签页标签都是左对齐的，但标签页没有正确拉伸

这很接近，但最终看起来有点像直方图。

【参考方案1】：

以下内容将为您提供您所追求的外观。

    <TabControl TabStripPlacement="Left" HorizontalContentAlignment="Left" >
        <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header 1">
            <TabItem.Content>Test</TabItem.Content>
        </TabItem>

        <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header 2"  >
            <TabItem.Content>Test</TabItem.Content>
        </TabItem>

        <TabItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Header="Header Longer Version">
            <TabItem.Content>Test</TabItem.Content>
        </TabItem>
    </TabControl>

【讨论】：

我刚刚进行了测试，并想出了一些外观正确的东西。

【参考方案2】：

您对 TabItem.Header 属性使用什么类型的控件？如果您只是使用标签，您是否将标签的宽度指定为某个常用值？如果标签根据内容调整大小，那么它将如您所见。尝试以下对用于显示标题文本的标签的通用宽度：

<TabControl TabStripPlacement="Left" >
    <TabItem>
        <TabItem.Header>
            <Label Width="100">test tab 1</Label>
        </TabItem.Header>
        <TabItem.Content>
            xyz
        </TabItem.Content>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Label Width="100">test t2</Label>
        </TabItem.Header>
        <TabItem.Content>
            abc
        </TabItem.Content>
    </TabItem>
    <TabItem>
        <TabItem.Header>
            <Label Width="100">test tab three</Label>
        </TabItem.Header>
        <TabItem.Content>
            abc
        </TabItem.Content>
    </TabItem>
</TabControl>

【参考方案3】：

您可以定义所有选项卡标题的水平对齐方式：

<TabControl...>
    <TabControl.ItemContainerStyle>
        <Style TargetType="x:Type TabItem">
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
    </TabControl.ItemContainerStyle>
    ...
</TabControl>

【讨论】：

好主意，但不太奏效。我编辑了我的问题以显示它的作用。

但是 +1 用于设置 ItemContainerStyle... 的想法可以节省大量标记。请参阅我的第二次编辑。

【参考方案4】：

只需将属性 Horizo​​ntalContentAlignment="Left" 添加到 TabControl 即可将选项卡标题左对齐。

<TabControl
Margin="0,5,0,0"
HorizontalContentAlignment="Left"
TabStripPlacement="Left">
<TabItem
    Header="Perform System Administration">
    ...
<TabItem
    Header="Perform Setup Tasks">
    ...