在TabControl中使用各种ViewModel重用UserControl

Question

I have one user control that I would like to reuse with multiple ViewModels, all which implement the same interface. I would like to have these embedded in a TabControl.

Currently I can do this for a single instance but I am struggling to reuse my UserControl. For the single instance I can either bind the ViewModel in the UserContol's xaml or instantiate it in the code behind, however I can't figure out how to set this from a higher level.

Here is what I have,

      <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>

Here is pseudo code for what I would like to achieve,

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

Thanks!

Answer 1

Instead of hard coding the tabs, bind to an ObservableCollection of an "item" class. Ie something like

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

create an:

ObservableCollection<MyTabItems>

Bind the TabControl ItemsSource to the ObservableCollection. In the item template for the TabControl bind the Header to the Header property and the DataContext to the DataContext property. The source can be hardcoded in the template or you can add another property to your item class and bind it to that if you want more flexibility.

Answer 2

Thanks to SledgeHammer's answer I was able to take a different approach and get things working.

        <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 was populated in the code behind associated with the xaml above.

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