WPF TabControl and DataTemplates

Question

I\'ve got a set of ViewModels that I\'m binding to the ItemsSource property of a TabControl. Let\'s call those ViewModels AViewModel, BViewModel, and CViewModel. Each one of tho

Answer 1

In this example I use DataTemplates in the resources section of my TabControl for each view model I want to display in the tab items. In this case I map ViewModelType1 to View1 and ViewModelType2 to View2. The view models will be set as DataContext object of the views automatically.

For displaying the tab item header, I use an ItemTemplate. The view models I bind to are of different types, but derive from a common base class ChildViewModel that has a Title property. So I can set up a binding to pick up the title to display it in the tab item header.

In addition I display a "Close" Button in the tab item header. If you do not need that, just remove the button from the example code so you just have the header text.

The contents of the tab items are rendered with a simple ItemTemplate which displays the view in a content control with Content="{Binding}".

The user control which contains the tab control has a container view model of type ContainerViewModel as DataContext. Here I have a collection of all the view models displayed in the tab control. I also have a property for the currently selected view model (tab item).

This is a shortened version of my container view model (I skipped the change notification part).

public class ContainerViewModel
{
    /// 

    /// The child view models.
    /// 
    public ObservableCollection ViewModels {get; set;}

    /// 

    /// The currently selected child view model.
    /// 
    public ChildViewModel SelectedViewModel {get; set;}
}