How do I bind a TabControl to a collection of ViewModels?

Question

Basically I have in my MainViewModel.cs:

ObservableCollection<TabItem> MyTabs { get; private set; }

However, I need to somehow be able to not only create the tabs, but have the tabs content be loaded and linked to their appropriate viewmodels while maintaining MVVM.

Basically, how can I get a usercontrol to be loaded as the content of a tabitem AND have that usercontrol wired up to an appropriate viewmodel. The part that makes this difficult is the ViewModel is not supposed to construct the actual view items, right? Or can it?

Basically, would this be MVVM appropriate:

UserControl address = new AddressControl();
NotificationObject vm = new AddressViewModel();
address.DataContext = vm;
MyTabs[0] = new TabItem()
{
    Content = address;
}

I only ask because well, i'm constructing a View (AddressControl) from within a ViewModel, which to me sounds like a MVVM no-no.

Answer 1

In Prism you usually make the tab control a region so that you don't have to take control over the bound tab page collection.

<TabControl 
    x:Name="MainRegionHost"
    Regions:RegionManager.RegionName="MainRegion" 
    />

Now the views can be added via registering itself into the region MainRegion:

RegionManager.RegisterViewWithRegion( "MainRegion", 
    ( ) => Container.Resolve<IMyViewModel>( ).View );

And here you can see a speciality of Prism. The View is instanciated by the ViewModel. In my case I resolve the ViewModel throught a Inversion of Control container (e.g. Unity or MEF). The ViewModel gets the View injected via constructor injection and sets itself as the View's data context.

The alternative is to register the view's type into the region controller:

RegionManager.RegisterViewWithRegion( "MainRegion", typeof( MyView ) );

Using this approach allows you to create the views later during runtime, e.g. by a controller:

IRegion region = this._regionManager.Regions["MainRegion"];

object mainView = region.GetView( MainViewName );
if ( mainView == null )
{
    var view = _container.ResolveSessionRelatedView<MainView>( );
    region.Add( view, MainViewName );
}

Because you have registered the View's type, the view is placed into the correct region.

Answer 2

I have a Converter to decouple the UI and ViewModel,thats the point below:

<TabControl.ContentTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding Tab,Converter={StaticResource TabItemConverter}"/>
    </DataTemplate>
</TabControl.ContentTemplate>

The Tab is a enum in my TabItemViewModel and the TabItemConverter convert it to the real UI.

In the TabItemConverter,just get the value and Return a usercontrol you need.

Answer 3

My solution uses ViewModels directly, so I think it might be useful to someone:

First, I bind the Views to the ViewModels in the App.xaml file:

<Application.Resources>
        <DataTemplate DataType="{x:Type local:ViewModel1}">
            <local:View1/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:ViewModel2}">
            <local:View2/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:ViewModel3}">
            <local:View3/>
        </DataTemplate>
</Application.Resources>

The MainViewModel looks like this:

    public class MainViewModel : ObservableObject
        {
            private ObservableCollection<ViewModelBase> _viewModels = new ObservableCollection<ViewModelBase>();
            

            public ObservableCollection<ViewModelBase> ViewModels
            {
                get { return _viewModels; }
                set
                {
                    _viewModels = value;
                    OnPropertyChanged();
                }
            }
    
            private ViewModelBase _currentViewModel;
 
           public ViewModelBase CurrentViewModel
            {
                get { return _currentViewModel; }
                set
                {
                    _currentViewModel = value;
                    OnPropertyChanged();
                }
            }
    
            private ICommand _closeTabCommand;
    
            public ICommand CloseTabCommand => _closeTabCommand ?? (_closeTabCommand = new RelayCommand(p => closeTab()));
            
private void closeTab()
            {
                ViewModels.Remove(CurrentViewModel);
                CurrentViewModel = ViewModels.LastOrDefault();
            }
    
    
            private ICommand _openTabCommand;
    
            public ICommand OpenTabCommand => _openTabCommand ?? (_openTabCommand = new RelayCommand(p => openTab(p)));
            
private void openTab(object selectedItem)
            {
                Type viewModelType;
    
                switch (selectedItem)
                {
                    case "1":
                        {
                            viewModelType = typeof(ViewModel1);
                            break;
                        }
                    case "2":
                        {
                            viewModelType = typeof(ViewModel2);
                            break;
                        }
                    default:
                        throw new Exception("Item " + selectedItem + " not set.");
                }
    
                displayVM(viewModelType);
            }
    
            private void displayVM(Type viewModelType)
            {
                if (!_viewModels.Where(vm => vm.GetType() == viewModelType).Any())
                {
                    ViewModels.Add((ViewModelBase)Activator.CreateInstance(viewModelType));
                }
                CurrentViewModel = ViewModels.Single(vm => vm.GetType() == viewModelType);
            }
    
        }
    }

MainWindow.XAML:

<Window.DataContext>
        <local:MainWindowViewModel x:Name="vm"/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Menu Grid.Row="0">
            <MenuItem Header="1" Command="{Binding OpenTabCommand}" CommandParameter="1"/>
            <MenuItem Header="2" Command="{Binding OpenTabCommand}" CommandParameter="2"/>
            <MenuItem Header="3" Command="{Binding OpenTabCommand}" CommandParameter="3"/>
        </Menu>
        <TabControl Grid.Row="1" ItemsSource="{Binding ViewModels}" SelectedItem="{Binding CurrentViewModel}">
            <TabControl.ItemTemplate>
                <DataTemplate DataType="{x:Type MVVMLib:ViewModelBase}">
                    <TextBlock Text="{Binding Title}">
                    <Hyperlink Command="{Binding RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}, Path=DataContext.CloseWindowCommand}">X</Hyperlink>    
                    </TextBlock>                    
                </DataTemplate>
            </TabControl.ItemTemplate>                        
        </TabControl>
    </Grid>

I translated some parts to make it easier to understand, there might be some typos.