Navigating between views in WPF / MVVM

I have long been searching for a hard and fast way of navigating between views in an MVVM / WPF environment.

For some time I have been using ways that do not completely avoid code-behind and violated the spirit of MMVM pattern somewhat.

Thanks to Rachel Lim’s excellent blog post, I think I have nailed down a way of accomplishing this in a way that I am happy with.

I have created a minimalist application application that utilises Rachel Lim’s MVVM based pattern in conjunction with the Mediator pattern to enable us to switch from one view to any other view as and when desired.

Step 1: Create a new WPF application

Step 2: Add classes for event handling, RelayCommand etc

RelayCommand.cs

public class RelayCommand<T> : ICommand
   {
      private readonly Predicate<T> _canExecute;
      private readonly Action<T> _execute;

      public RelayCommand(Action<T> execute)
         : this(execute, null)
      {
         _execute = execute;
      }

      public RelayCommand(Action<T> execute, Predicate<T> canExecute)
      {
         if (execute == null)
         {
            throw new ArgumentNullException("execute");
         }
         _execute = execute;
         _canExecute = canExecute;
      }

      public bool CanExecute(object parameter)
      {
         return _canExecute == null || _canExecute((T)parameter);
      }

      public void Execute(object parameter)
      {
         _execute((T)parameter);
      }

      public event EventHandler CanExecuteChanged
      {
         add { CommandManager.RequerySuggested += value; }
         remove { CommandManager.RequerySuggested -= value; }
      }
   }

   public class RelayCommand : ICommand
   {
      private readonly Predicate<object> _canExecute;
      private readonly Action<object> _execute;

      public RelayCommand(Action<object> execute)
         : this(execute, null)
      {
         _execute = execute;
      }

      public RelayCommand(Action<object> execute, Predicate<object> canExecute)
      {
         if (execute == null)
         {
            throw new ArgumentNullException("execute");
         }
         _execute = execute;
         _canExecute = canExecute;
      }

      public bool CanExecute(object parameter)
      {
         return _canExecute == null || _canExecute(parameter);
      }

      public void Execute(object parameter)
      {
         _execute(parameter);
      }

      // Ensures WPF commanding infrastructure asks all RelayCommand objects whether their
      // associated views should be enabled whenever a command is invoked 
      public event EventHandler CanExecuteChanged
      {
         add
         {
            CommandManager.RequerySuggested += value;
            CanExecuteChangedInternal += value;
         }
         remove
         {
            CommandManager.RequerySuggested -= value;
            CanExecuteChangedInternal -= value;
         }
      }

      private event EventHandler CanExecuteChangedInternal;

      public void RaiseCanExecuteChanged()
      {
         CanExecuteChangedInternal.Raise(this);
      }
   }

EventRaiser.cs

public static class EventRaiser
   {
      public static void Raise(this EventHandler handler, object sender)
      {
         handler?.Invoke(sender, EventArgs.Empty);
      }

      public static void Raise<T>(this EventHandler<EventArgs<T>> handler, object sender, T value)
      {
         handler?.Invoke(sender, new EventArgs<T>(value));
      }

      public static void Raise<T>(this EventHandler<T> handler, object sender, T value) where T : EventArgs
      {
         handler?.Invoke(sender, value);
      }

      public static void Raise<T>(this EventHandler<EventArgs<T>> handler, object sender, EventArgs<T> value)
      {
         handler?.Invoke(sender, value);
      }
   }

EventArgs.cs

public class EventArgs<T> : EventArgs
   {
      public EventArgs(T value)
      {
         Value = value;
      }

      public T Value { get; private set; }
   }

Step 3: Create a common ViewModel interface

All user control based ViewModels inherit from an IPageViewModel interface so they can have some common properties:

namespace MvvmNavigation
{
   public interface IPageViewModel
   {      
   }
}

Step 4: Create the Views

Here are the MainWindow, UserControl1, UserControl2 XAML views:

MainWindow.xaml

<Window x:Class="MvvmNavigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmNavigation"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="350" Width="525">

    <Grid>
        <ContentControl Content="{Binding CurrentPageViewModel}" />
    </Grid>
</Window>

UserControl1.xaml

<UserControl x:Class="MvvmNavigation.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MvvmNavigation"
             mc:Ignorable="d" 
             d:DesignHeight="280" 
             d:DesignWidth="280">
    <Grid>
        <Button 
            Content="Go to View 2"
            Command="{Binding GoTo2}"
            Width="90" Height="30" />
    </Grid>
</UserControl>

UserControl2.xaml

<UserControl x:Class="MvvmNavigation.UserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MvvmNavigation"
             mc:Ignorable="d" 
             d:DesignHeight="280" d:DesignWidth="280">
    <Grid>
        <Button 
            Content="Go to View 1"
            Command="{Binding GoTo1}"
            Width="90" Height="30" />
    </Grid>
</UserControl>

Step 5: Create the ViewModel classes

The classes created are a base ViewModel class implementing INotifyPropertyChanged, the MainWindow ViewModel and ViewModels for the user controls.

BaseViewModel.cs

using System;
using System.ComponentModel;
using System.Diagnostics;

namespace MvvmNavigation
{
   public abstract class BaseViewModel : INotifyPropertyChanged
   {
      public event PropertyChangedEventHandler PropertyChanged;

      protected void OnPropertyChanged(string propertyName)
      {
         VerifyPropertyName(propertyName);
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
      }

      [Conditional("DEBUG")]
      private void VerifyPropertyName(string propertyName)
      {
         if (TypeDescriptor.GetProperties(this)[propertyName] == null)
            throw new ArgumentNullException(GetType().Name + " does not contain property: " + propertyName);
      }
   }
}

MainWindowViewModel.cs

using System.Collections.Generic;
using System.Linq;

namespace MvvmNavigation
{
   public class MainWindowViewModel : BaseViewModel
   {    
      private IPageViewModel _currentPageViewModel;
      private List<IPageViewModel> _pageViewModels;

      public List<IPageViewModel> PageViewModels
      {
         get
         {
            if (_pageViewModels == null)
               _pageViewModels = new List<IPageViewModel>();

            return _pageViewModels;
         }
      }

      public IPageViewModel CurrentPageViewModel
      {
         get
         {
            return _currentPageViewModel;
         }
         set
         {
            _currentPageViewModel = value;
            OnPropertyChanged("CurrentPageViewModel");            
         }
      }

      private void ChangeViewModel(IPageViewModel viewModel)
      {
         if (!PageViewModels.Contains(viewModel))
            PageViewModels.Add(viewModel);

         CurrentPageViewModel = PageViewModels
             .FirstOrDefault(vm => vm == viewModel);         
      }

      private void OnGo1Screen(object obj)
      {
         ChangeViewModel(PageViewModels[0]);
      }

      private void OnGo2Screen(object obj)
      {
         ChangeViewModel(PageViewModels[1]);
      }
     
      public MainWindowViewModel()
      {
         // Add available pages and set page
         PageViewModels.Add(new UserControl1ViewModel());
         PageViewModels.Add(new UserControl2ViewModel());

         CurrentPageViewModel = PageViewModels[0];

         Mediator.Subscribe("GoTo1Screen", OnGo1Screen);
         Mediator.Subscribe("GoTo2Screen", OnGo2Screen);
      }
   }
}

UserControl1ViewModel.cs

using System.Windows.Input;

namespace MvvmNavigation
{
   public class UserControl1ViewModel : BaseViewModel, IPageViewModel
   {
      private ICommand _goTo2;

      public ICommand GoTo2
      {
         get
         {
            return _goTo2 ?? (_goTo2 = new RelayCommand(x =>
            {
               Mediator.Notify("GoTo2Screen", "");
            }));
         }
      }
   }
}

UserControl2ViewModel.cs

using System.Windows.Input;

namespace MvvmNavigation
{
   public class UserControl2ViewModel : BaseViewModel, IPageViewModel
   {
      private ICommand _goTo1;

      public ICommand GoTo1
      {
         get
         {
            return _goTo1 ?? (_goTo1 = new RelayCommand(x =>
            {
               Mediator.Notify("GoTo1Screen", "");
            }));
         }
      }
   }
}

Step 6: Add the class implementing the Mediator pattern

Mediator.cs

using System;
using System.Collections.Generic;

namespace MvvmNavigation
{
   public static class Mediator
   {
      private static IDictionary<string, List<Action<object>>> pl_dict = 
         new Dictionary<string, List<Action<object>>>();

      public static void Subscribe(string token, Action<object> callback)
      {
         if (!pl_dict.ContainsKey(token))
         {
            var list = new List<Action<object>>();
            list.Add(callback);
            pl_dict.Add(token, list);
         }
         else
         {
            bool found = false;
            foreach (var item in pl_dict[token])
               if (item.Method.ToString() == callback.Method.ToString())
                  found = true;
            if (!found)
               pl_dict[token].Add(callback);
         }
      }

      public static void Unsubscribe(string token, Action<object> callback)
      {
         if (pl_dict.ContainsKey(token))
            pl_dict[token].Remove(callback);
      }

      public static void Notify(string token, object args=null)
      {
         if (pl_dict.ContainsKey(token))
            foreach (var callback in pl_dict[token])
               callback(args);
      }
   }
}

Step 7: Add resources to the App.XAML

<Application x:Class="MvvmNavigation.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MvvmNavigation">
    <Application.Resources>
        <DataTemplate DataType="{x:Type local:UserControl1ViewModel}">
            <local:UserControl1 />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:UserControl2ViewModel}">
            <local:UserControl2 />
        </DataTemplate>
    </Application.Resources>
</Application>

On running the program see that the View defaults to the UserControl1 View:

And on clicking the button it then navigates to UserControl2 View:

And on clicking the button again we are navigated back to the original UserControl1 View:

Leave a Reply