我有一个包含 TabControl 的用户控件(TabUserControl).该 UserControl 的 Viewmodel 加载 TabItems 的 ab Observable 集合.这些项目之一是另一个用户控件.当我只是在 tabcontrol 中加载文本时没有问题，但是如何将其他用户控件加载到 TabUserControl 的 tabitem 中.我正在使用 MVVM.

I have a Usercontrol(TabUserControl) which contains a TabControl. The Viewmodel of that UserControl loads ab Observable collection of TabItems. One od those items is another user control. When I just load text in the tabcontrol there is no problem, but how can I load the other user control into the tabitem of the TabUserControl. I'm using MVVM.

这是我的代码:

public class TabItem
{
    public string Header { get; set; }
    public object Content { get; set; } // object to allow all sort of items??
}

TabUserControl 的视图模型

The Viewmodel of the TabUserControl

public class TabViewModel
{
    public ObservableCollection<TabItem> Tabs {get;set;}

    public TabViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        //Tabs.Add(new TabItem { Header = "Overview", Content = new OverviewViewModel() }); How to load a usercontrol here if it's in the ItemCollection?
        Tabs.Add(new TabItem { Header = "Overview", Content = "Bla bla bla" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}

然后是 TabControl XAML:

And then the TabControl XAML:

<TabControl x:Name="_tabControl"
            ItemsSource="{Binding Tabs}">
  <TabControl.ItemContainerStyle>
    <Style TargetType="TabItem">
      <Setter Property="Header"
              Value="{Binding Header}" />
      <Setter Property="Content"
              Value="{Binding Content}" />
    </Style>
  </TabControl.ItemContainerStyle>
</TabControl>

只要我不在 tabItems 集合中加载用户控件的视图模型，它就可以工作.如何使 UserTabControl 加载到 TabItem?目的是每个 tabitem 都将包含一个用户控件.然后每个用户控件做它自己的事情.

It works as long as I dont load the viewmodel of the usercontrol in the tabItems collection. how can I make the UserTabControl load on to the TabItem? The intention is that every tabitem will contain a usercontrol. Each usercontrol then does it's own thing.

希望有人可以帮助我，因为我是 WPF 初学者.谢谢！

Hope someone can help me as I am a WPF beginner. Thx!

推荐答案

理想情况下，TabControl.ItemsSource 应该设置为 ViewModels 的集合，并且 DataTemplates 应该用于告诉 WPF 使用特定的 UserControl 绘制每个 ViewModel.

Ideally, the TabControl.ItemsSource should be set to a collection of ViewModels, and DataTemplates should be used to tell the WPF to draw each ViewModel with a specific UserControl.

这使您的业务逻辑(ViewModels)与您的 UI(Views)完全分离

This keeps between your business logic (ViewModels) completely separate from your UI (Views)

例如，

<TabControl x:Name="MyTabControl"
            ItemsSource="{Binding TabViewModels}"
            SelectedItem="{Binding SelectedTabViewModel}">

    <TabControl.Resources>
        <DataTemplate DataType="{x:Type my:ViewModelA}">
            <my:ViewAUserControl />
        </DataTemplate>
        <DataTemplate DataType="{x:Type my:ViewModelB}">
            <my:ViewBUserControl />
        </DataTemplate>
        <DataTemplate DataType="{x:Type my:ViewModelC}">
            <my:ViewCUserControl />
        </DataTemplate>
    </TabControl.Resources>

    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding Header}" />
        </Style>
    </TabControl.ItemContainerStyle>

</TabControl>

包含 TabControl 的 DataContext 的 ViewModel:

ViewModel containing TabControl's DataContext:

TabViewModels = new ObservableCollection<ITabViewModel>();
TabViewModels.Add(new ViewModelA { Header = "Tab A" });
TabViewModels.Add(new ViewModelB { Header = "Tab B" });
TabViewModels.Add(new ViewModelC { Header = "Tab C" });

SelectedTabViewModel = TabViewModels[0];