Handle navigation events in your content

Modern UI includes a content navigation framework that handles content loading, unloading and history navigation based on link uris. If you want your content to be aware of navigation events such as loaded and unloaded events, you'll need to implement an interface.

Make your content navigation aware by implementing the IContent interface available in the FirstFloor.ModernUI.Windows namespace. The interface defines 4 methods:

public interface IContent
{
  void OnFragmentNavigation(FragmentNavigationEventArgs e);
  void OnNavigatedFrom(NavigationEventArgs e);
  void OnNavigatedTo(NavigationEventArgs e);
  void OnNavigatingFrom(NavigatingCancelEventArgs e);
}

Loading and unloading

The OnNavigatedTo method is invoked when the content becomes the active content in a frame. This is a good time to initialize your content.

The OnNavigatingFrom method is invoked when the content is about to become inactive. You can use the OnNavigatingFrom method to cancel navigation by setting the NavigatingCancelEventArgs.Cancel to true. The method OnNavigatedFrom is called when the content is no longer the active content.

Important: do not rely on WPF Loaded and Unloaded events for content initialization and clean up. The Loaded and Unloaded events are raised multiple times when the active content changes. This is due to the use of multiple ContentPresenters in the TransitioningContentControl required for fluent animations. Use OnNavigatedTo and OnNavigatedFrom instead.

Fragment navigation

The OnFragmentNavigation is called when navigation to a content fragment begins. Fragment navigation happens when you navigate to a link uri containing a fragment (use the # character).

Once IContent is implemented by your content pages, the navigation methods are automatically invoked when a page is loaded in a ModernFrame instance. The following code demonstrates a content sample that prevents navigation when the user doesn't allow it:

public class MyContent : UserControl, IContent
{
  public void OnFragmentNavigation(FragmentNavigationEventArgs e)
  {
  }
  public void OnNavigatedFrom(NavigationEventArgs e)
  {
  }
  public void OnNavigatedTo(NavigationEventArgs e)
  {
  }
  public void OnNavigatingFrom(NavigatingCancelEventArgs e)
  {
    // ask user if navigating away is ok
    if (false == ModernDialog.ShowMessage("Navigate away?, "navigate",   
      System.Windows.MessageBoxButton.YesNo)) {
                e.Cancel = true;
    }
  }
}

Last edited May 2, 2013 at 1:43 PM by kozw, version 2

Comments

Zenon66 Jul 24, 2014 at 11:15 AM 
I would rathen allow to use an event handler in order to use better with MVVM.
I usually have to launch Command after the OnNavigatedTo or OnNavigatingFrom, so using the MVVM logic it would be possible to write something like this:

<i:Interaction.Triggers>
<i:EventTrigger EventName="OnNavigatingFrom">
<i:InvokeCommandAction Command="{Binding SaveCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>

Best Regards
FStarred

Knerd Mar 19, 2014 at 7:28 PM 
Is it possible to use this with MVVM?

janssenkm Mar 9, 2014 at 7:33 AM 
Mabey this can be simplify:
I think the navigation can be such as this link:
Samples/Page1.xaml?userid=10021291
:)

and this target page can use some Methods such as GetQueryString("userid")

janssenkm Mar 9, 2014 at 6:24 AM 
two questions:
Can I add some Parameters when navigating to the page?
Can I navigate to a page using Code, not using BBCode?

icelava Dec 27, 2013 at 10:07 AM 
How should one programmatically react to UI events (like button click) in a sub page in the main window's MenuLinkGroup to auto navigate to another sub page?

RaniRaj Dec 17, 2013 at 6:53 AM 
Could you please help me for the code to refresh the contents of a page in the OnNavigatedTo method .

GreenCat77 Jul 7, 2013 at 4:56 PM 
You know, this is really helpful to have; My first instinct when making my program was to use Loaded() and Unloaded(). I really think you should have that interface implemented in the template kinda like this:

public void OnNavigatedTo(NavigationEventArgs e)
{
//Add navigation logic here.
}

...that would be pretty helpful. :)