代码之家 › 专栏 › 技术社区 › devuxer

是否可以在WPF选项卡控件中左对齐标题?

tabcontrol alignment xaml wpf

devuxer · 技术社区 · 16 年前

现在,我有一个wpf窗口,如下所示:

All the tab labels of the TabControl are centered http://img33.yfrog.com/img33/9996/tabcontrolcenteredheade.jpg

我希望它看起来像这样(photoshop篡改的图像):

All the tab labels of the TabControl are left-aligned http://img42.yfrog.com/img42/6687/tabcontrolleftalignedhe.jpg

如果不完全重做 ControlTemplate ?

我试着弄乱 HorizontalAlignment , HorizontalContentAlignment 等等,但我所做的一切都没有达到预期的效果。

编辑:

如果我尝试这个解决方案(由T Levesque提供)

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

我得到这个:

All the tab labels of the TabControl are left-aligned, but the tabs don't stretch properly http://img14.imageshack.us/img14/6687/tabcontrolleftalignedhe.jpg

这很接近,但最终看起来有点像柱状图。

编辑2:

作为记录,我最终结合了R.Copsey和T.Levesque的答案得出了这个结论:

<TabControl
    Margin="0,5,0,0"
    HorizontalContentAlignment="Left"
    TabStripPlacement="Left">
    <TabControl.ItemContainerStyle>
        <Style
            TargetType="TabItem">
            <Setter
                Property="HorizontalAlignment"
                Value="Stretch" />
            <Setter
                Property="HorizontalContentAlignment"
                Value="Stretch" />
        </Style>
    </TabControl.ItemContainerStyle>
    <TabItem
        Header="Perform System Administration">
        ...
    <TabItem
        Header="Perform Setup Tasks">
        ...

4 回复 | 直到 14 年前

Reed Copsey 16 年前

下面将介绍您所需要的外观。

    <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>

Simon Fox 16 年前

您对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>

Thomas Levesque 16 年前

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

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

SkyBlade 14 年前

只需将属性HorizontalContentAlignment=“Left”添加到TabControl将使选项卡标题左对齐。

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