Jesse Liberty

When you move from code behind to a View Model (as you should, if only to make 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( )
  {
 
      Messenger.Default.Register<INavigationMessage>(
          this,
          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(
               navigationMessage.PageType);
 
       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?

First, when I checked Google, all I could find was articles saying this can’t be done.  Humbug.  Thanks to Roger Peters and jFarrell I got it done (well, they did and then I did, but now you will).

Here are the steps (and they are pretty easy)

• Create a normal XAML file named App.xaml.
• This will automatically create a file named App.xaml.cs
• Copy from App.cs to App.xaml.cs and delete App.cs
• In App.xaml set the ContentPage to be an Application and create a resource dictionary

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="eSiteMoble.App">
 
 
  <Application.Resources>
    <ResourceDictionary>

• Add the keyword Partial before class in App.xaml.cs
• Add InitializeComponent to the constructor (this is critical)

Hey! Presto! your resources are available to any page…

<Label Text="Remember Me?"
             TextColor="{StaticResource TextForegroundColor}"

Easy as cake. Piece of Pie.