WPF MVVM navigate views

by

Firstly, you don’t need any of those toolkits/frameworks to implement MVVM. It can be as simple as this… let’s assume that we have a MainViewModel, and PersonViewModel and a CompanyViewModel, each with their own related view and each extending an abstract base class BaseViewModel.

In BaseViewModel, we can add common properties and/or ICommand instances and implement the INotifyPropertyChanged interface. As they all extend the BaseViewModel class, we can have this property in the MainViewModel class that can be set to any of our view models:

public BaseViewModel ViewModel { get; set; }

Of course, you’d be implementing the INotifyPropertyChanged interface correctly on your properties unlike this quick example. Now in App.xaml, we declare some simple DataTemplates to connect the views with the view models:

<DataTemplate DataType="{x:Type ViewModels:MainViewModel}">
    <Views:MainView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:PersonViewModel}">
    <Views:PersonView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:CompanyViewModel}">
    <Views:CompanyView />
</DataTemplate>

Now, wherever we use one of our BaseViewModel instances in our application, these DataTemplates will tell the framework to display the related view instead. We can display them like this:

<ContentControl Content="{Binding ViewModel}" />

So all we need to do now to switch to a new view is to set the ViewModel property from the MainViewModel class:

ViewModel = new PersonViewModel();

Finally, how do we change the views from other views? Well there are several possible ways to do this, but the easiest way is to add a Binding from the child view directly to an ICommand in the MainViewModel. I use a custom version of the RelayComand, but you can use any type you like and I’m guessing that you’ll get the picture:

public ICommand DisplayPersonView
{
    get { return new ActionCommand(action => ViewModel = new PersonViewModel(), 
        canExecute => !IsViewModelOfType<Person>()); }
}

In the child view XAML:

<Button Command="{Binding DataContext.DisplayPersonView, RelativeSource=
    {RelativeSource AncestorType={x:Type MainView}}, Mode=OneWay}" />

That’s it! Enjoy.

More Related Contents:

  1. MVVM: Tutorial from start to finish?
  2. Good or bad practice for Dialogs in wpf with MVVM?
  3. Data binding to SelectedItem in a WPF Treeview
  4. Binding a WPF ComboBox to a custom list
  5. How to bind to a PasswordBox in MVVM
  6. ICommand MVVM implementation
  7. How to bind WPF button to a command in ViewModelBase?
  8. Opening new window in MVVM WPF
  9. Implementing CollectionChanged
  10. What’s the best way to pass event to ViewModel?
  11. WPF MVVM Why use ContentControl + DataTemplate Views rather than straight XAML Window Views?
  12. Changing the View for a ViewModel
  13. Binding SelectedItems of ListView to ViewModel
  14. Mvvm model ViewModel
  15. WPF – Set Focus when a button is clicked – No Code Behind
  16. Proper way to use CollectionViewSource in ViewModel
  17. MVVM Sync Collections
  18. Moving to next control on Enter keypress in WPF
  19. Can I somehow temporarily disable WPF data binding changes?
  20. One ViewModel for UserControl and Window or separate ViewModels
  21. The component does not have a resource identified by the uri
  22. ScrollIntoView for WPF DataGrid (MVVM)
  23. How to set focus to textbox using MVVM?
  24. WPF Tab Key Navigation
  25. Binding Commands to Events?
  26. How to have multiple pairs “View-ViewModel”?
  27. Accessing a property in one ViewModel from another
  28. Add context menu in datagrid, how to get the select Item value
  29. Limit binding updates per second
  30. Is it wrong to use the Dispatcher within my ViewModel?

Leave a Comment