下拉选项卡控件

Question

我一直在尝试为 WPF 中的 TabControl 创建自定义皮肤/模板。

我希望选项卡显示在组合框中。当您从 ComboBox 中选择项目时，我希望选项卡控件的内容区域显示 TabItem 内容。

这是一张显示我正在寻找的内容的图像：

我可以使用某种主从设置来完成此操作数据对象和模板，但问题是我想使用 TabControl XAML 格式设置控件，如下所示：

<TabControl Style="{DynamicResource ComboTabControlStyle}">
   <TabItem Header="TabItem1">
      <TextBlock Text="TabItem1 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
   </TabItem>
   <TabItem Header="TabItem2">
      <TextBlock Text="TabItem2 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
   </TabItem>
   <TabItem Header="TabItem3">
      <TextBlock Text="TabItem3 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
   </TabItem>
</TabControl>

有什么想法或建议吗？

使用不同的面板更改选项卡项目的布局非常容易，但 ComboBox 是 ItemsControl，而不是面板。

我尝试将 ComboBox 放入 TabControl 模板中，并将 ComboBox 的 ItemsSource 绑定到 TabControl.Items 属性，但它似乎无法正常工作。

我还尝试创建一个自定义面板，该面板一次仅显示一个“选定”项目，并在单击它时显示下拉列表中的所有项目（基本上是一个“组合框”面板）。我遇到了麻烦，因为视觉效果只能位于视觉树中的一个位置。因此，将面板的子项放入弹出窗口中会导致引发异常。

有人还有其他想法吗？

感谢您的帮助！

Answer 1

做你想做的事出乎意料地困难。这非常接近：

<DockPanel>
    <ComboBox x:Name="ItemSelector" DockPanel.Dock="Top">
        <ComboBox.ItemTemplate>
            <DataTemplate DataType="{x:Type TabItem}">
                <TextBlock Text="{Binding Header}"/>
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <TabItem Header="TabItem1">
            <TextBlock Text="TabItem1 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </TabItem>
        <TabItem Header="TabItem2">
            <TextBlock Text="TabItem2 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </TabItem>
        <TabItem Header="TabItem3">
            <TextBlock Text="TabItem3 Content!" FontSize="18.667" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </TabItem>      
    </ComboBox>
    <ContentPresenter Content="{Binding SelectedItem.Content, ElementName=ItemSelector}" DockPanel.Dock="Top"/>
    <TextBlock/>
</DockPanel>

奇怪的是，它崩溃的地方是在 ComboBox 中显示所选项目：渲染项目时会忽略 ItemTemplate，因此选择框包含一个 TabItem。要解决此问题，您必须子类化 ComboBox 并实现读/写 SelectionBoxItemTemplate 依赖属性，因为，出于某种原因，我确信这并不像我现在看来那么愚蠢，属性是只读的。

Answer 2

创建一个新类，继承自panel，在里面放一个组合框，做很多父级绑定，然后使用它。它会成功的。

您必须使用自定义类来编写选项卡，因为它们是常规选项卡项目。

Answer 3

我找到了解决方案。

我创建了一个自定义控件类（MasterDetailControl）。

该类有两个模板部分：

[TemplatePart(Name = "PART_MasterSelector", Type = typeof(Selector))]
[TemplatePart(Name = "PART_DetailPresenter", Type = typeof(ContentPresenter))]

该控件有一个项目依赖属性：

public IList Items { ... }

我添加了一个辅助类：

[ContentProperty("Detail")]
public class MasterDetail
{
   public object Master { get; set; }
   public object Detail { get; set; }
}

放置在 Items DP 中的项目由 MasterDetailControl 处理。如果它们的类型为 MasterDetail，则主数据将添加到选择器项目列表中。对于其他子项类型，将创建一个新的 MasterDetail 对象，并将该对象分配给主字段和详细信息字段。一个单独的列表维护所有生成的 MasterDetail 对象，其索引与选择器控件中的索引相对应。

当 Selector 对象上触发 SelectionChanged 事件时，我将 ContentPresenter 的 Content 属性设置为与所选主对象对应的项目的 Detail 字段。

如果有人想了解更多详细信息，请随时发表评论。

最后，我现在可以将此控件与指定任何选择器对象（ListBox、ComboBox 等）和 ContentPresenter 的简单控件模板一起使用。