Modern UI For WPF Application by Example (NavigationMessageService - MVVM): Part 3

Scope

The purpose of this article is to show how to create a navigation mensage service for a WPF application that uses the Modern UI.

Introduction

The Modern UI is a set of controls and styles that can make our WPF application a great looking Modern UI app. The Modern UI project can be found in mui.codeplex.com, where it is possible to get the WPF app that demostrates the features provided by the “mui”.

WPF doesn´t have a pattern for the navigation when we are using Windows, only a navigation service for Pages exists. The ModernUI introduces a special way for the navigation that uses the ModernFrame.

In the article Modern UI for WPF application by example (Handle Navigation: (Default)) we saw how to handle the navigation. In this sample we will see how to navigate among views using messages.

Description

The navigation we will implement is based on messages sent from a view model to the MainWindow, these messages are sent/received by the Messenger class provided by the MVVMLight Toolkit.

Start by creating the NavigationMessage as in the following:

public class NavigationMessage
{
    /// <summary>
    /// Gets or sets the page.
    /// </summary>
    /// <value>The page.</value>
    public string Page { get; set; }
}

In the MainWindow register to receive the message defined as in the following:

private void RegisterNavigation()
{
    Messenger.Default.Register<NavigationMessage>(this, p =>
    {
        var frame = GetDescendantFromName(this, "ContentFrame") as ModernFrame;

        // Set the frame source, which initiates navigation
        if (frame != null)
        {
            frame.Source = new Uri(p.Page, UriKind.Relative);
        }
    });
}

Where GetDescendantFromName is the method that uses VisualTreeHelper to get the ModernFrame.

In the StepsViewModel sends the NavigationMessage with the path for the view we want to navigate.

private void ShowResources()
{
    Messenger.Default.Send(new NavigationMessage()
    {
        Page = "Views/ResourcesControl.xaml"
    });
}

Where we only navigated to the new view, to send the parameters. When navigating we should use another message with the parameter we want to send, with it the comunication will we among view models.

Source Code

Get the source code for this sample in github.

 

<< Modern UI for WPF application by example (NavigationService - MVVM) Part-2