Table of Contents



Scope

This article has the goal to show how to create a navigation message service for WPF application that uses 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 don´t have a pattern for the navigation when we are using Windows, only exist a navigation service for Pages. ModernUI introduce a special way for the navigation, that use 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 between views using messages.

Description

The navigation we will implement is based in messages send from a view model to the MainWindow, these messages are send/received by 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.

 

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.