代码之家 › 专栏 › 技术社区 › Josh G

下拉选项卡控件

tabcontrol combobox templates wpf

Josh G · 技术社区 · 14 年前

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

我希望选项卡显示在组合框中。从组合框中选择项时,我希望选项卡控件的内容区域显示选项卡项内容。

这是一张显示我要找的东西的图片:

alt text

我可以使用数据对象和模板的某种主细节设置来完成此操作,但问题是我希望使用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放入TabControl模板,并将ComboBox的itemsSource绑定到TabControl.items属性,但它似乎无法正常工作。

我还尝试创建一个自定义面板,一次只显示一个“选定”项,单击它时在下拉列表中显示所有项(基本上是一个“组合框”面板)。我遇到了麻烦,因为视觉只能在视觉树的一个地方。因此,将面板的子级放入弹出窗口会导致抛出异常。

有人有其他想法吗?

谢谢你的帮助!

3 回复 | 直到 14 年前

Robert Rossney 14 年前

做你想做的事是非常困难的。这非常接近:

<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进行子类化,并实现一个读/写SelectionBoxItemTemplate依赖属性,因为出于某种原因,我确信该属性不会像现在这样愚蠢,它是只读的。

Chen Kinnrot 14 年前

创建一个新的类,从面板继承,在里面放置一个组合框,做很多父绑定,然后使用它。这就行了。

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

Josh G 14 年前

我找到了解决办法。

我创建了一个自定义控件类(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; }
}

放置在项目DP中的项目由MasterDetailControl处理。如果它们是masterdetail类型,则master将添加到选择器项列表中。对于其他子项类型,将创建一个新的MasterDetail对象,对象分配给Master和Detail字段。单独的列表维护所有生成的MasterDetail对象,其中的索引与选择器控件中的索引相对应。

当SelectionChanged事件在Selector对象上激发时,我将ContentPresenter的Content属性设置为与所选主对象对应的项的详细字段。

如果有人想了解更多细节,请随时发表评论。

最后,我可以将此控件与一个简单的控件模板一起使用,该模板指定任何选择器对象(列表框、组合框等)和ContentPresenter。