c# - 使 WPF Tabcontrol 标题垂直堆叠

Question

我一直在尝试让我的 tabcontrol header 垂直堆叠，但无论我做什么，它都无法正常工作

这就是我想要的:

这很有趣，因为此显示是由于 Visual Studio 编辑器中的某些错误造成的。

但这就是我得到的

我尝试过这段代码

<DockPanel>
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="File">
            <MenuItem Header="Prepare Report"></MenuItem>
            <MenuItem Header="Print PDF"></MenuItem>
            <Separator/>
            <MenuItem Header="Exit"></MenuItem>
        </MenuItem>
        <MenuItem Header="Configurations">
            <MenuItem Header="Pay Grade"></MenuItem>
            <MenuItem Header="Staff Levels"></MenuItem>
            <MenuItem Header="Departments"></MenuItem>
            <MenuItem Header="Authroizations"></MenuItem>
        </MenuItem>
        <MenuItem Header="Help">
            <MenuItem Header="Help Content"/>
            <Separator/>
            <MenuItem Header="About Software"/>
        </MenuItem>
    </Menu>
    <StackPanel Orientation="Horizontal"></StackPanel>
    <TabControl TabStripPlacement="Left" DockPanel.Dock="Top" Style="{DynamicResource NavigationMenu}" Margin="20 0">
        <TabControl.Resources>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <ContentPresenter Content="{TemplateBinding Content}">
                                <ContentPresenter.LayoutTransform>
                                    <RotateTransform Angle="-360" />
                                </ContentPresenter.LayoutTransform>
                            </ContentPresenter>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>
        <TabItem x:Name="Dashboard">
            <TabItem.Header><TextBlock Text="DASHBOARD" FontSize="20" ></TextBlock></TabItem.Header>
        </TabItem>
        <TabItem  x:Name="Staffs">
            <TabItem.Header>
                <TextBlock Text="STAFFS" ></TextBlock>
            </TabItem.Header>
        </TabItem>
        <TabItem  x:Name="Departments">
            <TabItem.Header>
                <TextBlock Text="DEPARTMENTS" ></TextBlock>
            </TabItem.Header>
        </TabItem>
        <TabItem x:Name="Settings">
            <TabItem.Header>
                <TextBlock Text="SETTINGS" ></TextBlock>
            </TabItem.Header>
        </TabItem>
    </TabControl>
</DockPanel>

但是它破坏了我的用户界面并像这样显示

黑暗部分不应该存在，我什至不知道它来自哪里

Answer 1

您应该能够通过删除数据模板/样式来解决此问题，只需将 TabControl 的 TabStripPlacement 属性设置为 Left

或者通过样式 setter ，如下所示:

<Style TargetType="TabControl">
    <Setter Property="TabStripPlacement" Value="Left"></Setter>
</Style>

默认 TabStrip(实际上是 TabPanel)只是模板中的 StackPanel。 TabStripPlacement 更改 TabControl 中 TabStrip 的位置 - 而且还将 StackPanel 从水平方向切换为垂直方向...这应该会为您提供所需的结果。