В этом примере я использую DataTemplates в разделе ресурсов моего TabControl для каждой модели представления, которую я хочу отобразить во вкладках.
В этом случае я сопоставляю ViewModelType1 с View1 и ViewModelType2 с View2.
Модели видов будут автоматически установлены как DataContext объект видов.
Для отображения заголовка элемента вкладки я использую ItemTemplate.
Модели представлений, к которым я привязываюсь, бывают разных типов, но унаследованы от общего базового класса ChildViewModel, который имеет свойство Title. Поэтому я могу установить привязку, чтобы подобрать заголовок и отобразить его в заголовке элемента вкладки.
Кроме того, в заголовке элемента вкладки отображается кнопка «Закрыть». Если вам это не нужно, просто удалите кнопку из примера кода, чтобы у вас был только текст заголовка.
Содержимое элементов вкладки отображается с помощью простого ItemTemplate, который отображает представление в элементе управления содержимым с Content = "{Binding}".
<UserControl ...>
<UserControl.DataContext>
<ContainerViewModel></ContainerViewModel>
</UserControl.DataContext>
<TabControl ItemsSource="{Binding ViewModels}"
SelectedItem="{Binding SelectedViewModel}">
<TabControl.Resources>
<DataTemplate DataType="{x:Type ViewModelType1}">
<View1/>
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModelType2}">
<View2/>
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding Title}" />
<Button DockPanel.Dock="Right" Margin="5,0,0,0"
Visibility="{Binding RemoveButtonVisibility}"
Command="{Binding DataContext.CloseItemCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TypeOfContainingView}}}"
>
<Image Source="/Common/Images/ActiveClose.gif"></Image>
</Button>
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</UserControl>
Пользовательский элемент управления, содержащий элемент управления с вкладками, имеет модель представления контейнера типа ContainerViewModel как DataContext. Здесь у меня есть коллекция всех моделей представлений, отображаемых на вкладке управления. У меня также есть свойство для текущей выбранной модели вида (элемент вкладки).
Это сокращенная версия моей модели представления контейнера (я пропустил часть уведомления об изменении).
public class ContainerViewModel
{
/// <summary>
/// The child view models.
/// </summary>
public ObservableCollection<ChildViewModel> ViewModels {get; set;}
/// <summary>
/// The currently selected child view model.
/// </summary>
public ChildViewModel SelectedViewModel {get; set;}
}