MVVM Light Toolkit and Windows Phone : Navigation Between Pages

• Download NavigationMVVMLightWP8-XAP.zip - 107.8 KB
• Download NavigationMVVMLightWP8-Source.zip - 2.4 MB

Introduction

The following code snippets will show you how to add the basic navigation between pages in Windows phone 8 with MVVM Light Toolkit.

Using the code

To achieve our goal, as mentioned before, we will need to implement an Interface and a Class.

"INavigationService" interface :

First, we'll begin by adding "INavigationService" interface :

public interface INavigationService
{
    event NavigatingCancelEventHandler Navigating;
    void NavigateTo(Uri pageUri);
    void GoBack();
}

It allows :

• Navigation to a given URI.
• Going back
• Being notified when a navigation is taking place, and be able to cancel

"NavigationService" class :

Then, we'll add the "NavigationService" class

public class NavigationService : INavigationService
{
    private PhoneApplicationFrame _mainFrame;

    public event NavigatingCancelEventHandler Navigating;

    public void NavigateTo(Uri pageUri)
    {
        if (EnsureMainFrame())
        {
            _mainFrame.Navigate(pageUri);
        }
    }

    public void GoBack()
    {
        if (EnsureMainFrame() && _mainFrame.CanGoBack)
        {
            _mainFrame.GoBack();
        }
    }

    private bool EnsureMainFrame()
    {
        if (_mainFrame != null)
        {
            return true;
        }

        _mainFrame = Application.Current.RootVisual as PhoneApplicationFrame;

        if (_mainFrame != null)
        {
            // Could be null if the app runs inside a design tool
            _mainFrame.Navigating += (s, e) =>
            {
                if (Navigating != null)
                {
                    Navigating(s, e);
                }
            };

            return true;
        }

        return false;
    }
}

Registering the Navigation Service (ViewModelLocator):

Before using the Navigation Service, we need to register it in the IOC (I'm using SimpleIoc).

SimpleIoc.Default.Register<INavigationService, NavigationService>();

Using the Navigation Service (MainPage):

navigationService = SimpleIoc.Default.GetInstance<INavigationService>();

Navigating to the next page (MainPage):

As the classic way to navigate to other pages, using this method is quite simple. Just use it as you do in a simple app.

You can also add parameters.

navigationService.NavigateTo(new Uri("/SecondPage.xaml?ParamName=ParamValue", UriKind.Relative));

 

That's it! I hope it was helpful.

History

This is the first version of this tip/trick. If you have any problem/question, feel free to comment.

You're welcome. Enjoy!