Modern UI for WPF application by example ( NavigationMessageService - MVVM )

Scope

This article has the goal to show how to create a navigation message service for WPF application using Modern UI.

Introduction

Modern UI is a set of controls and styles converting our WPF application into a great looking Modern UI app. The Modern UI project can be find in mui.codeplex.com, here is possible to get the WPF app that demostrate the features provided by "mui".

WPF doesn´t have a pattern for navigation using Windows, there is only a navigation service for Pages and UserControls. ModernUI introduces a special way for navigation - using 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 between 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 MVVMLight Toolkit.

Start by create the NavigationMessage as following

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

In the MainWindow register for receive the message defined as 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 use VisualTreeHelper for get the ModernFrame.

In the StepsViewModel send the NavigationMessage with the path for the view we wants to navigate

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

Where we only navigated to the new view, for send parameters when navigate we should use another message with the parameter we want to send, with it the communication will we between view models.

Alternative

If you do not require any of the events added by ModernUI and you do not require a navigation history then a ContentControl offers a lighter weight alternative to ModernFrame.

See others solutions for Navigation in ModernUI applications.
 Modern UI for WPF application by example (handle navigation)

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

Source code

Get the source code for this sample in github.