WPF Main menu for different views / viewmodels

Question

I'd like to create an app, containing the main menu (ribbonmenu) and different usercontrols, each assigned to an own ViewModel.

I was told to not implement classic events in code-behind but to use commands. So far, everything fine, commands for needed methods are implemented.
In my previous approach I "loaded" the UserControl, by assigning the corresponding ViewModel to a ContentControl, that loaded the UserControl, that was assigned to the ViewModel in MainWindow.Resource.

My last approach, simplified with a button instead of a menu:

<Window.Resources>
    <DataTemplate x:Name="settingsViewTemplate" DataType="{x:Type viewmodels:SettingsViewModel}">
        <views:SettingsView DataContext="{Binding SettingsVM, Source={StaticResource Locator}}"/>
    </DataTemplate>
    <DataTemplate x:Name="projectsViewTemplate" DataType="{x:Type viewmodels:ProjectViewModel}">
        <views:ProjectView DataContext="{Binding ProjectVM, Source={StaticResource Locator}}"/>
    </DataTemplate>
</Window.Resources>

<StackPanel>
    <Button Content="Load Settings" Height="20" Margin="20 20 20 0" Click="ShowSettings"/>
    <ContentControl Margin="5" Height="100" Content="{Binding}"/>
</StackPanel>

simplified code-behind:

    public SettingsViewModel settingsViewModel;
    public MainWindow()
    {
        InitializeComponent();
        settingsViewModel = new SettingsViewModel();
    }
    private void ShowSettings(object sender, RoutedEventArgs e)
    {
            DataContext = settingsViewModel;
    }

How can I load a UserControl, using ViewModel commands?

Answer 1

Don't use code-behind to handle view models. A View model should handle view models. Generally the same view model that implements the commands.

First create a main view model for the MainWindow as data source. This view model will also handle the switching between the views. It's recommended to let all page view models implement a common base type e.g. IPage.

Also you don't need any locator for this scenario. The views inside the DataTemplate will automatically have their DataContext set to the data type that maps to the DataTemplate. SettingsView will automatically have SetingsViewModel as the DataContext. If this would be the wrong context, then your model design is wrong.

IPage.cs

    interface IPage : INotifyPropertyChanged
    {
      string PageTitel { get; set; }
    }

SettingsViewModel.cs

    class SettingsViewModel : IPage
    {
      ...
    }

ProjectViewModel.cs

    class ProjectViewModel : IPage
    {
      ...
    }

PageName.cs

    public enum PageName
    {
      Undefined = 0, SettingsPage, ProjectPage
    }

MainViewModel.cs
An implementation of RelayCommand can be found at
Microsoft Docs: Patterns - WPF Apps With The Model-View-ViewModel Design Pattern - Relaying Command Logic

class MainViewModel : INotifyPropertyChanged
{
  public ICommand SelectPageCommand => new RelayCommand(SelectPage);

  public Dictionary<PageName, IPage> Pages { get; }

  private IPage selectedPage;   
  public IPage SelectedPage
  {
    get => this.selectedPage;
    set 
    { 
      this.selectedPage = value; 
      OnPropertyChanged();
    }
  }

  public MainViewModel()
  {
    this.Pages = new Dictionary<PageName, IPage>
    {
      { PageName.SettingsPage, new SettingsViewModel() },
      { PageName.ProjectPage, new ProjectViewModel() }
    };

    this.SelectedPage = this.Pages.First().Value;
  }

  public void SelectPage(object param)
  {
    if (param is PageName pageName 
      && this.Pages.TryGetValue(pageName, out IPage selectedPage))
    {
      this.SelectedPage = selectedPage;
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

MainWindow.xaml

<Window>
  <Window.DataContext>
    <MainViewModel />
  </Window.DataContext>

  <Window.Resources>
    <DataTemplate x:Name="settingsViewTemplate" DataType="{x:Type viewmodels:SettingsViewModel}">
      <views:SettingsView />
    </DataTemplate>
    <DataTemplate x:Name="projectsViewTemplate" DataType="{x:Type viewmodels:ProjectViewModel}">
      <views:ProjectView />
    </DataTemplate>
  </Window.Resources>

  <StackPanel>

    <!-- Content navigation -->
    <StackPanel Orientation="Horizontal">
      <Button Content="Load Settings" 
              Command="{Binding SelectPageCommand}" 
              CommandParameter="{x:Static PageName.SettingsPage}" />
      <Button Content="Load Projects" 
              Command="{Binding SelectPageCommand}" 
              CommandParameter="{x:Static PageName.ProjectPage}" />
    </StackPanel>

    <ContentControl Content="{Binding SelectedPage}" />
  <StackPanel>
</Window>

Answer 2

The short version:

public class MyViewModel : ViewModel

      public MyViewModel()
      {
           View = new MyUserControlView();
           View.DataContext = this; // allow the view to bind to the viewModel.
      } 

      ....

      public UIElement View {
            get; private set;
      }
  }

And then in XAML:

 <ContentControl Content={Binding View} />

There are variations on this theme but that's the basic premise. e.g., if you have a ViewModel that can be bound to multiple views, or ViewModels that have lifetimes longer than their view, you can use a FrameViewModel class like this:

public class FrameViewModel : INotifyProperyChanged; {
      public FrameViewModel(IViewModel viewModel; )
      {
           ViewModel = viewModel;
           View = viewModel.CreateView();
           View.DataContext = ViewModel;
      }
      public IViewModel ViewModel { get; set;...}
      public UIElement View { get; set; }
}

And then bind THAT into the host XAML with a ContentControl binding to Frame.View.

A more pure approach is to the use the DataTemplateSelector class to instantiate the User Control in a DataTemplate. This is probably the method that WPF designers had in mind for connecting View and ViewModel in WPF. But it ends up spreading the mapping of View and ViewModel across three separate files (the custom C# DataTemplateSelector implementation; widely-separated static resource declaration and ContentControl wrapper in the hosting Window/Page; and the DataTemplate resources themselves which end up in resource files eventually if you have anything but a trivial number of ViewModel/View bindings.

Purists would argue, I suppose, that there's something dirty about having a viewmodel create a view. But there's something far more dirty about code to make DataTemplateSelectors work spread across five files, and inevitable complications with databindings that ensue while trying to tunnel a binding through a DataTemplate.