WPF MVVM: vincolare un diverso ViewModel a ciascun TabItem?

Ho una finestra principale con un controllo a tabs che contiene 2 tabItem :

Finestra principale

Attualmente ho 1 ViewModel quali servizi Tab1 e ​​Tab2. Questo ViewModel sta diventando un po ‘gonfio con SOC sfocato. Voglio dividere la logica in 2 viewmodels: ViewModel 1 e ViewModel2. La mia comprensione è che è ansible impostare il DataContext finestra principale su un Base ViewModel che contiene una collezione di ViewModels e quindi si può asserire ogni TabItem su un ViewModel diverso.

L’esempio che ho visto di questi ViewModels di base espone una ObservableCOllection in questo modo:

 private ObservableCollection _viewModelCollection Public Observable Collection ViewModelCollection { get { return _viewModelCollection; } set { _viewModelCollection = value; OnPropertyChanged("ViewModelCollection"); } } public BaseViewModel() { ViewModelCollection = new ObservableCollection(); ViewModelCollection.Add(new ViewModel1(Tab1); ViewModelCollection.Add(new ViewModel1(Tab2); } 

Ma come posso assegnare un ViewModel diverso a ciascun TabItem? Vorrei Tab1 = ViewModel1 e Tab2 = ViewModel2?

È ansible infatti aggiungere i modelli di visualizzazione per le tabs a un modello di vista principale. È quindi ansible associare i modelli di visualizzazione figlio in XAML per le tabs.

MainViewModel avere tre viewmodels: MainViewModel , Tab1ViewModel e Tab2ViewModel . Sul tuo MainViewModel mantieni una collezione dei tuoi tabmodels:

 class MainViewModel { ObservableCollection _children; public MainViewModel() { _children = new ObservableCollection(); _children.Add(new Tab1ViewModel()); _children.Add(new Tab2ViewModel()); } public ObservableCollection Children { get { return _children; } } } 

Dopo aver impostato il DataContext della finestra principale su MainViewModel , puoi associare il DataContext delle tue tabs facendo riferimento alla proprietà Children :

         

Utilizzo un framework come Prism, che consente di definire le regioni e utilizzare RegionManager . È quindi ansible definire un ContentControl come ‘ui’ per TabItem

Quindi è ansible utilizzare RegionManager.RequestNavigate per popolare una regione con una vista particolare (e le nostre viste importano un viewmodel e impostano il proprio datacontext).

 class MainViewModel { ObservableCollection _children; public MainViewModel() { _children = new ObservableCollection(); _children.Add(new Tab1ViewModel()); _children.Add(new Tab2ViewModel()); } public ObservableCollection Children { get { return _children; } } } 

Ora in XAML si legano i bambini a ItemsSource. Genera ogni Tab per ogni viewmodel che abbiamo aggiunto alla collezione osservabile