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

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.