View Model Page Navigation with MVVM Light

When you move from code behind to a View Model (as you should, if only to makeBlank freeway sign ready for your custom text testing easier) certain challenges arise, such as: how do I navigate to another page?

Fortunately, MVVM Light provides a Messaging bus, that makes it easy to send messages from a View Model to a page (or to another View Model).  This can be over done but when used judiciously it makes the very difficult into the very easy.

The following solution was improved enormously¬†by Eric Grover, my favorite MVVM Light Guru after Laurent ūüôā

Begin by creating a parent for ContentPage (I called mine BaseViewPage). ¬†Have your content pages derive from the new page. ¬†In the new page we’ll register to receive Navigation Messages from the Messenger Bus


public BaseViewPage( )
          HandleNavigation );

Notice we need an interface, INavigationMessage and a method, HandleNavigation.

INavigationManager looks like this:


public interface INavigationMessage
      Type PageType { get;  }

This allows us to navigate to any type of page.  Its implementation is:

public class NavigationMessage<T> : INavigationMessage where T : Page
    public Type PageType
        get { return typeof(T); }

This nicely forces the type to be a Page.

Here’s HandleNavigation, which also goes in the BaseViewPage:


public async void HandleNavigation( 
    INavigationMessage navigationMessage )
       var target = Activator.CreateInstance(
       await Navigation.PushAsync( (ContentPage) target );

Nicely generic, which is just what we want.

Now we’re ready to use this. ¬†Let’s say we’re in MyPageViewModel and we want to navigate to YourPage (xaml). ¬†We write:


var message = new NavigationMessage<YourPage>();
Messenger.Default.Send( message );

Slick, eh?

About Jesse Liberty

Jesse Liberty is a Senior Consultant with Wintellect, with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight & LinkedIn Learning courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP and a Microsoft MVP.
This entry was posted in Xamarin. Bookmark the permalink.

One Response to View Model Page Navigation with MVVM Light

  1. Matt says:

    Wow, Thanks Jesse. This is exactly what I was looking for.

    Keep up the great posts!

Leave a Reply

Your email address will not be published. Required fields are marked *