在具有各种 ViewModel 的 TabControl 中重用 UserControl

Question

我有一个用户控件，我想将其与多个 ViewModel 重用，所有这些 ViewModel 都实现相同的界面。我想将这些嵌入到 TabControl 中。

目前我可以为单个实例执行此操作，但我正在努力重用我的 UserControl。对于单个实例，我可以在 UserContol 的 xaml 中绑定 ViewModel 或在后面的代码中实例化它，但是我不知道如何从更高级别设置它。

这是我的，

      <TabControl HorizontalAlignment="Left" Height="800" Margin="0,0,0,0" VerticalAlignment="Top" Width="600">
        <TabItem Header="Tab1">
            <Frame Source="SomeUserControl.xaml"  BorderThickness="0" Margin="0" />
        </TabItem>
    </TabControl>

这是我想要实现的伪代码，

      <TabControl>
        <TabItem Header="Tab1">
            <Frame Source="{SomeUserControl.xaml, DataContext=ViewModel1}" />
        </TabItem>
        <TabItem Header="Tab2">
            <Frame Source="{SomeUserControl.xaml, DataContext=ViewModel2}" />
        </TabItem>
    </TabControl>

谢谢！

Answer 1

不要对选项卡进行硬编码，而是绑定到 "item" class 的 ObservableCollection。 IE。像

class MyTabItems : INotifyPropertyChanged
{
  public string Header...
  public object DataContext...
}

创建一个：

ObservableCollection<MyTabItems>

将 TabControl ItemsSource 绑定到 ObservableCollection。在 TabControl 的项目模板中，将 Header 绑定到 Header 属性并将 DataContext 绑定到 DataContext 属性。源代码可以在模板中进行硬编码，或者您可以将另一个属性添加到您的项目 class 并将其绑定到该项目，如果您想要更大的灵活性。

Answer 2

多亏了 SledgeHammer 的回答，我才能够采用不同的方法并让事情正常进行。

        <TabControl Name="TabControl" ItemsSource="{Binding TabItems}" HorizontalAlignment="Left" Height="800" Margin="0,0,0,0" VerticalAlignment="Top" Width="600">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <UserControl Content="{Binding DataContext}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>

TabItems 已填充在与上述 xaml 相关的代码中。

    this.TabItems = new ObservableCollection<TabItem>
    {
        new TabItem("Main", new MainControl()), 
        new TabItem("Tab1", new GenericTabControl(new ViewModel1())),
        new TabItem("Tab2", new GenericTabControl(new ViewModel2()))
    };

在具有各种 ViewModel 的 TabControl 中重用 UserControl

Reuse UserControl in TabControl with Various ViewModels

c#

wpf

xaml

user-controls

mvvm