3

例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和一个在最右上角定位的正确方法是什么？

我试图通过更改其边距将第四个 tabitem 向右移动，但这并没有产生好的结果；首先它被剪短，其次它在选择时不能正确显示。

4

4 回答 4

5

问题是 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 示例的修改版本，用于设置 TabControl 的样式。）

简单的 DockPanel 不像 TabPanel 那样流畅 - 选项卡在它们之间切换时会“跳跃”一点，但这可能会让你开始。也许继承 TabPanel 并覆盖相关部分会给你一个更准确的结果；我想这取决于你想为此付出多少努力。

于 2011-01-17T18:31:03.990 回答
2

我发现通过插入一个“不可见”选项卡，我可以调整间距，（即从顶部向下移动选项卡）

例如：

TabItem  Height="100"  Visibility="Hidden" <br>
TabItem..... <br>
TabItem....  <br>
于 2011-04-29T20:17:58.400 回答
0

这将涉及 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 EG 之外的 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!!

我想您将需要编写自己的面板来托管 TabItems；请注意，这将是相当多的工作，因为您需要处理 TabPanel 中内置的溢出行为等问题。

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

如果您想走这条路，请在这篇文章中查看我的答案

于 2011-01-17T18:32:12.490 回答
0

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

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

于 2011-01-17T18:21:08.463 回答