Question

使用WPF在标签控件的最左上角和右上角的三个tabitems定位的正确方法是什么？

我试图通过改变它的边距将第四个tabitem移到右边但是这不会产生好的结果;首先，它被缩短，其次，它在选择时无法正确显示。

Answer 1

问题是TabControl内部用于布置选项卡的TabPanel似乎不支持您想要的内容。一个快速的解决方法是用其他东西替换TabPanel，例如DockPanel：

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <TabControl>
        <TabControl.Template>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
                        <Border BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter ContentSource="SelectedContent"/>
                            </Border>
                        </Border>
                    </Border>
                    <DockPanel IsItemsHost="True" LastChildFill="False" Margin="2,2,2,0" />
                </Grid>
            </ControlTemplate>
        </TabControl.Template>

        <TabItem Header="Item 1" />
        <TabItem Header="Item 2" />
        <TabItem Header="Item 3" />
        <TabItem Header="Item 4" DockPanel.Dock="Right" />
    </TabControl>
</Window>

（参考：这是MSDN example的修改版本，用于设置TabControl的样式。）

简单的DockPanel不像TabPanel那样平滑 - 当它们之间切换时，标签会“跳”一点，但这可能会让你开始。也许子类化TabPanel并覆盖相关部分会给你一个更准确的结果;我想这取决于你想付出多少努力。

Answer 2

我发现通过插入“隐形”标签我可以调整间距，（即从顶部向下移动标签）

例如：

TabItem  Height="100"  Visibility="Hidden" <br>
TabItem..... <br>
TabItem....  <br>

Answer 3

您需要将TabControl中的TabPanel换成自定义提供所需行为的内容。默认panels都不会提供您想要的开箱即用的行为。

这很可能需要覆盖MeasureOverride和ArrangeOverride来根据其中包含的项目数量在面板中提供自定义展示位置。

Answer 4

这将涉及TabControl的自定义ControlTemplate。我尝试使用DockPanel作为项目主机而不是默认的TabPanel。

<Style  TargetType="{x:Type TabControl}">
        <Setter Property="OverridesDefaultStyle"
                Value="True" />
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <DockPanel Name="HeaderPanel"
                                   LastChildFill="False"
                                  Grid.Row="0"
                                  Panel.ZIndex="1"
                                  Margin="0,0,4,-1"
                                  IsItemsHost="True"
                                  KeyboardNavigation.TabIndex="1"
                                  Background="Transparent" />
                        <Border Name="Border"
                                Grid.Row="1"
                                Background="WhiteSmoke"
                                BorderBrush="Black"
                                BorderThickness="1"
                                CornerRadius="2"
                                KeyboardNavigation.TabNavigation="Local"
                                KeyboardNavigation.DirectionalNavigation="Contained"
                                KeyboardNavigation.TabIndex="2">
                            <ContentPresenter Name="PART_SelectedContentHost"
                                              Margin="4"
                                              ContentSource="SelectedContent" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

问题是我不知道将DockPanel.Dock属性暴露给ControlTemplate E.G之外的TabItems的方法。

<TabControl Margin="10">
    <TabItem Header="Tab One" DockPanel.Dock="Left"/>
    <TabItem Header="Tab Two" DocKPanel.Dock="Left"/>
    <TabItem Header="Tab Three" DocKPanel.Dock="Left"/>
    <TabItem Header="Tab Four" DocKPanel.Dock="Right"/>
</TabControl>

// Note: This does not work!!

我想你需要编写自己的Panel来托管TabItems;请注意，这将是非常多的工作，因为您将需要处理内置于TabPanel中的溢出行为。

即使您尝试过这种做法，如果您想在ControlTemplate之外公开此功能，我认为您必须编写自定义 TabControl 。

如果您想沿着这条路前行，请在此post

中查看我的答案

WPF tabitem定位

4 个答案: