Table of Contents



Scope

This article has the goal to show how to create a blank window in WPF using Modern UI, which handle the navigation.

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 found in mui.codeplex.com, here it is possible to get the WPF app that demonstrates the features provided by "mui".

WPF don´t have a pattern for the navigation when we are using Windows, only exist a navigation service when we use Pages. ModernUI introduce a special way for the navigation, that use the ModernFrame.

The question here is, how I know when the user is navigating from one view to another?

 Description

In the sample Modern UI for WPF application by example (Default Window) we saw the default window provided by Modern UI, and in this sample we will use the same base code but we will change the code for handle the navigation.

If we search the properties from the  ModernWindow, we will see that it don´t have any event or method for handle navigation. After some search in documentation, we find an article Handle navigation events in your content.

Let's apply it!

The MainWindow contains a MenuLinkGroups which contains a LinkGroup with two Links. Each link is defined by a UserControl. For handle navigation, each user control will implement the interface IContent, like following

/// <summary>
   /// Interaction logic for StepsControl.xaml.
   /// </summary>
   public partial class StepsControl : IContent
   {
       /// <summary>
       /// Initializes a new instance of the <see cref="StepsControl"/> class.
       /// </summary>
       public StepsControl()
       {
           InitializeComponent();
       }
 
       /// <summary>
       /// Called when navigation to a content fragment begins.
       /// </summary>
       /// <param name="e">An object that contains the navigation data.</param>
       public void OnFragmentNavigation(FragmentNavigationEventArgs e)
       {
           Debug.WriteLine("StepsControl- OnFragmentNavigation");
       }
 
       /// <summary>
       /// Called when this instance is no longer the active content in a frame.
       /// </summary>
       /// <param name="e">An object that contains the navigation data.</param>
       public void OnNavigatedFrom(NavigationEventArgs e)
       {
           Debug.WriteLine("StepsControl -OnNavigatedFrom");
       }
 
       /// <summary>
       /// Called when a this instance becomes the active content in a frame.
       /// </summary>
       /// <param name="e">An object that contains the navigation data.</param>
       public void OnNavigatedTo(NavigationEventArgs e)
       {
           Debug.WriteLine("StepsControl- OnNavigatedTo");
       }
 
       /// <summary>
       /// Called just before this instance is no longer the active content in a frame.
       /// </summary>
       /// <param name="e">
       /// An object that contains the navigation data.
       /// </param>
       /// <remarks>
       /// The method is also invoked when parent frames are about to navigate.
       /// </remarks>
       public void OnNavigatingFrom(NavigatingCancelEventArgs e)
       {
           Debug.WriteLine("StepsControl- OnNavigatingFrom");
       }
   }

Using Debug.WriteLine we will show in output window the flow when we navigate in MainWindow.

The output will be something like

StepsControl - OnNavigatedTo
StepsControl - OnNavigatingFrom
StepsControl - OnNavigatedFrom
ResourcesControl - OnNavigatedTo
ResourcesControl - OnNavigatingFrom
ResourcesControl - OnNavigatedFrom
StepsControl - OnNavigatedTo
StepsControl - OnNavigatingFrom
StepsControl - OnNavigatedFrom
ResourcesControl - OnNavigatedTo

See the code source in github - ModernUIForWPFSample.Navigation (Default) .

Suppose when we navigate we want to do some task and we are using the  MVVM pattern. We could get the view model defined in DataContext and then call method that apply what we want, something like

public void OnNavigatedTo(NavigationEventArgs e)
       {
           var viewModel = DataContext as MyViewModel;
           if (viewModel != null)
           {
               viewModel.DoSomething();
           }
       }

or we can define events that will be called when the methods from IContent are raised and this events can be defined in UI using the EventTrigger and InvokeCommandAction. With this we will avoid code in code behiden.

First we will create our ModernUserControl which is a UserControl and implements the IContent. This control will have four events, one for each method required for IContent.

The implementation will be something like

public class ModernUserControl : UserControl, IContent
  {
      /// <summary>
      /// Handles the <see cref="E:FragmentNavigation"/> event.
      /// </summary>
      /// <param name="e">The <see cref="FirstFloor.ModernUI.Windows.Navigation.FragmentNavigationEventArgs"/> instance containing the event data.</param>
      public void OnFragmentNavigation(FragmentNavigationEventArgs e)
      {
          if (FragmentNavigation != null)
          {
              FragmentNavigation(this, e);
          }
      }
 
      /// <summary>
      /// Handles the <see cref="E:NavigatedFrom"/> event.
      /// </summary>
      /// <param name="e">The <see cref="FirstFloor.ModernUI.Windows.Navigation.NavigationEventArgs"/> instance containing the event data.</param>
      public void OnNavigatedFrom(NavigationEventArgs e)
      {
          if (NavigatedFrom != null)
          {
              NavigatedFrom(this, e);
          }
      }
 
      /// <summary>
      /// Handles the <see cref="E:NavigatedTo"/> event.
      /// </summary>
      /// <param name="e">The <see cref="FirstFloor.ModernUI.Windows.Navigation.NavigationEventArgs"/> instance containing the event data.</param>
      public void OnNavigatedTo(NavigationEventArgs e)
      {
          if (NavigatedTo != null)
          {
              NavigatedTo(this, e);
          }
      }
 
      /// <summary>
      /// Handles the <see cref="E:NavigatingFrom"/> event.
      /// </summary>
      /// <param name="e">The <see cref="FirstFloor.ModernUI.Windows.Navigation.NavigatingCancelEventArgs"/> instance containing the event data.</param>
      public void OnNavigatingFrom(NavigatingCancelEventArgs e)
      {
          if (NavigatingFrom != null)
          {
              NavigatingFrom(this, e);
          }
      }
 
      /// <summary>
      /// Occurs when [navigating from].
      /// </summary>
      public event NavigatingCancelHandler NavigatingFrom;
 
      /// <summary>
      /// Occurs when [navigated from].
      /// </summary>
      public event NavigationEventHandler NavigatedFrom;
 
      /// <summary>
      /// Occurs when [navigated to].
      /// </summary>
      public event NavigationEventHandler NavigatedTo;
 
      /// <summary>
      /// Occurs when [fragment navigation].
      /// </summary>
      public event FragmentNavigationHandler FragmentNavigation;
  }

After it, StepsUserControl and ResourcesUserControl will be a ModernUserControl has following

<controls:ModernUserControl x:Class="ModernUIForWPFSample.Navigation.Views.StepsControl"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:controls="clr-namespace:ModernUIForWPFSample.Navigation__MVVM_.Controls"
             d:DesignHeight="300"
             d:DesignWidth="600"
             mc:Ignorable="d"
             DataContext="{Binding StepsViewModel, Source={StaticResource Locator}}">
    <i:Interaction.Triggers>
         <i:EventTrigger EventName="NavigatedTo">
            <i:InvokeCommandAction Command="{Binding NavigatedToCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="NavigatedFrom">
            <i:InvokeCommandAction Command="{Binding NavigatedFromCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="NavigatingFrom">
            <i:InvokeCommandAction Command="{Binding NavigatingFromCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="FragmentNavigation">
            <i:InvokeCommandAction Command="{Binding FragmentNavigationCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="Loaded">
            <i:InvokeCommandAction Command="{Binding LoadedCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="IsVisibleChanged">
            <i:InvokeCommandAction Command="{Binding IsVisibleChangedCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">
            Steps:
            <LineBreak />
            1st Install the ModernUI from Nuget
            <LineBreak />
            2nd Define in App.xaml the resources for ModernUI.xaml and ModernUI.Light.xaml
            <LineBreak />
            3rd Change the MainWindow: Replace the tag "Window" to ModernWindow
            <LineBreak />
            4th Define the content for the MainWindow using TitleLinks, MenuLinkGroups, LinkGroup...
            <LineBreak />
            5th Define which content is shown when the application start, by using the ContentSource
            <LineBreak />
            6th For each content (in this case for StepsControl and ResourcesControl) must implement the interface IContent
            <LineBreak />
            7th For each navigation method (OnFragmentNavigation, OnNavigatedFrom, OnNavigatedTo and OnNavigatingFrom) add the behavior you want
            <LineBreak />
            <LineBreak />
            Note: For change the appearance use  AppearanceManager class
        </TextBlock>
    </Grid>
</controls:ModernUserControl>



For help in th MVVM pattern implementation we will use MVVMLight Toolkit and we will have two view models (StepsViewModel and ResourcesViewModel). Here are the class diagram.

ViewModelLocator will help in binding the view model to the view and is where we setup the dependencies when we use dependency injection.

When we ran the application the output will be something like

ModernUserControl - OnNavigatedTo
StepsViewModel - LoadData
ModernUserControl - OnNavigatingFrom
StepsViewModel - NavigatingFrom
ModernUserControl - OnNavigatingFrom event called
ModernUserControl - OnNavigatedFrom
StepsViewModel - NavigatedFrom
ModernUserControl - OnNavigatedFrom event called
ModernUserControl - OnNavigatedTo
StepsViewModel - LoadData
ResourcesViewModel - LoadData
ModernUserControl - OnNavigatingFrom
ResourcesViewModel - NavigatingFrom
ModernUserControl - OnNavigatingFrom event called
ModernUserControl - OnNavigatedFrom
ResourcesViewModel - NavigatedFrom
ModernUserControl - OnNavigatedFrom event called
ModernUserControl - OnNavigatedTo
StepsViewModel - NavigatedTo
ModernUserControl - OnNavigatedTo event called
ResourcesViewModel - LoadData
StepsViewModel - LoadData

With it, we can conclude when we use events, the NavigateTo event is not raised at the first time the control is shown, it because the NavigateTo event wasn´t subscribed when the first navigation occurs.

See others solutions for Navigation in ModernUI applications.

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

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

Source code

Get the source code for this sample in github.