Drop-down TabControl

Question

I've been trying to create a custom skin/template for a TabControl in WPF.

I want the tabs to be displayed in a ComboBox. When you select the item from the ComboBox, I want the content area of the tab control to display the TabItem contents.

Here's an image showing what I'm looking for:

I could do this using some sort of master-detail setup with data objects and templates, but the problem is I want to set up the controls using the TabControl XAML format, like this:

<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>

Any thoughts or suggestions?

It is very easy to change the layout of the tab items using a different Panel, but a ComboBox is an ItemsControl, not a Panel.

I tried putting the ComboBox in the TabControl template and binding the ItemsSource of the ComboBox to the TabControl.Items property, but it didn't seem to work correctly.

I also tried creating a custom panel that only shows one "selected" item at a time and shows all of the items in a drop-down when you click on it (basically a "ComboBox" panel). I ran into trouble because visuals can only be in one place in the visual tree. So putting the children of the panel into a popup caused an exception to be thrown.

Anybody have any other ideas?

Thanks for the help!

Answer 1

Create a new class, inherit from panel, put a combo box inside, do a lot of parent binding, and use it. it'll do the trick.

You must use custom class to write the tabs as they are regular tab items.

Answer 2

It's surprisingly difficult to do what you're trying to do. This comes very close:

<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>

Where it breaks down, oddly, is displaying the selected item in the ComboBox: the ItemTemplate is ignored when rendering the item, so the selection box contains a TabItem. To fix this, you have to subclass ComboBox and implement a read/write SelectionBoxItemTemplate dependency property, because, for some reason that I'm sure is not as stupid as it seems to me at this moment, that property's read-only.

Answer 3

I found a solution.

I created a custom Control class (MasterDetailControl).

This class has two template parts:

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

The control has an items dependency property:

public IList Items { ... }

I added a helper class:

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

Items that are placed in the Items DP are processed by the MasterDetailControl. If they are of type MasterDetail, the master is added to the selector items list. For other child item types, a new MasterDetail object is created with the object assigned to the master and detail fields. A separate list maintains all of the generated MasterDetail objects with indexes that correspond to those in the Selector control.

When the SelectionChanged event fires on the Selector object, I set the ContentPresenter's Content property to the Detail field of the item corresponding to the selected master object.

If anyone wants more details, feel free to comment.

In the end, I can now use this control with a simple control template specifying any selector object (ListBox, ComboBox, etc) and a ContentPresenter.