WPF binds different UserControls in a DataTemplate TabControl

Question

As new in WPF and MVVM light, I am struggling to apply the MVVM pattern in TabControl. I will give you an example of what I am trying to achieve.

TabOne xaml and its presentation model

<UserControl x:Class="TestTabControl.TabOne" xmlns:local="clr-namespace:TestTabControl" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <TextBlock Text="tab one ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </UserControl> //TabOne ViewModel class TabOne : ViewModelBase { public string TabName { get { return "TabOne"; } } } 

TabTwo xaml and its view model

 <UserControl x:Class="TestTabControl.TabTwo" xmlns:local="clr-namespace:TestTabControl" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <TextBlock Text="tab two ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </UserControl> //TabTwo ViewModel class TabTwo : ViewModelBase { public string TabName { get { return "TabTwo"; } } } 

and finally xaml MainWindow and its viewmodel

 <Window x:Class="TestTabControl.MainWindow" xmlns:local="clr-namespace:TestTabControl" mc:Ignorable="d" Title="Test Tab Control" MinWidth="500" Width="1000" Height="800"> <TabControl ItemsSource="{Binding TabViewModels}" > <TabControl.ItemTemplate > <!-- header template --> <DataTemplate> <TextBlock Text="{Binding TabName}" /> </DataTemplate> </TabControl.ItemTemplate> <TabControl.ContentTemplate> <DataTemplate> ????????? </DataTemplate> </TabControl.ContentTemplate> </TabControl> </Window> //MainWindow ViewModel class MainWindowViewModel : ViewModelBase { private ObservableCollection<ViewModelBase> _tabViewModels; public MainWindowViewModel() { _tabViewModels = new ObservableCollection<ViewModelBase>(); TabViewModels.Add(new TabOne()); TabViewModels.Add(new TabTwo()); } public ObservableCollection<ViewModelBase> TabViewModels { get { return _tabViewModels; } set // is that part right? { _tabViewModels = value; RaisePropertyChanged(() => TabViewModels); } } } 

What should I write in a DataTemplate? Can I pass both user controls for TabOne and TabTwo in this DataTemplate to get a view for each tab that I click? Or do I need to write another DataTemplate?