MVVM WPF: associare un ViewModel diverso a ciascun TabItem?

Question

ho una finestra principale con un controllo scheda contenente 2 tabItem s:

Al momento ho 1 ViewModel quali servizi Tab1 & Tab2. Questo ViewModel sta diventando un po 'gonfio con SOC sfocato. Voglio dividere la logica in 2 viewmodels: ViewModel 1 & ViewModel2. La mia comprensione è che è possibile impostare la Finestra principale DataContext su un Base ViewModel che contiene una collezione di ViewModels &, quindi è possibile dichiarare ogni TabItem su un ViewModel diverso.

del esempio che ho visto di questi ViewModels di base esporre un ObservableCollection in questo modo:

private ObservableCollection<ViewModel1> _viewModelCollection 
Public Observable Collection<ViewModel1> ViewModelCollection 
{ 
    get { return _viewModelCollection; } 
    set 
    { 
     _viewModelCollection = value; 
     OnPropertyChanged("ViewModelCollection"); 
    } 
} 

public BaseViewModel() 
{ 
    ViewModelCollection = new ObservableCollection<ViewModel1>(); 
    ViewModelCollection.Add(new ViewModel1(Tab1); 
    ViewModelCollection.Add(new ViewModel1(Tab2); 
} 

Ma come faccio assegnare un ViewModel diverso per ogni TabItem? Vorrei Tab1 = ViewModel1 & Tab2 = ViewModel2?

Answer 1

In effetti è possibile aggiungere i modelli di visualizzazione per le schede a un modello di vista principale. È quindi possibile associare i modelli di visualizzazione figlio in XAML per le schede.

Dire che si dispone di tre modelli di visualizzazione: MainViewModel, Tab1ViewModel e Tab2ViewModel. Sulla vostra MainViewModel si mantiene una raccolta di ViewModels tab:

class MainViewModel 
{ 
    ObservableCollection<object> _children; 

    public MainViewModel() 
    { 
     _children = new ObservableCollection<object>(); 
     _children.Add(new Tab1ViewModel()); 
     _children.Add(new Tab2ViewModel()); 
    } 

    public ObservableCollection<object> Children { get { return _children; } } 
} 

Dopo aver impostato il DataContext della finestra principale per il vostro MainViewModel è possibile associare la DataContext delle schede facendo riferimento alla proprietà Children:

<TabControl> 
    <TabItem DataContext="{Binding Children[0]}" x:Name="Tab1" Header="Tab1" > 
     <!-- Tab content --> 
    </TabItem> 
    <TabItem DataContext="{Binding Children[1]}" x:Name="Tab2" Header="Tab2" > 
     <!-- Tab content --> 
    </TabItem> 
</TabControl> 

Answer 2

Uso un framework come Prism, che consente di definire le regioni e utilizzare RegionManager. È quindi possibile definire una ContentControl come il 'ui' per il TabItem

Quindi è possibile utilizzare il RegionManager.RequestNavigate per popolare una regione di nome con una vista particolare (e le nostre opinioni importare un ViewModel e impostare la loro DataContext).