Prism UWP for Beginners: Navigation

In this post, we’ll talk about navigation with Prism in UWP. By navigation, I mean the technique to go from one page to another in your app. The operation in UWP/XAML is typically performed with the Frame class that’s available only in the code-behind of a page, because it inherits from Frame. This way, we do not respect the MVVM pattern. Prism comes helps by providing a wrapper to the Frame class, accessible from the ViewModel: it’s the NavigationService. This isn’t a very new name to us because we found it in the bootstrapper.

 protected override Task OnInitializeAsync(IActivatedEventArgs args)
 { 
     //... 
     Container.RegisterInstance(NavigationService); 
     //... 
 }

We saw it at the end of the bootstrap procedure in the OnLaunchApplicationAsync method, too.

protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
{
     NavigationService.Navigate(PageNames.Main.ToString(), null); 
     return Task.FromResult(true); 
     //This is a little trick because this method returns a Task.
} 

To try the navigation system, we create a SettingsPage in the View folder and then navigate to that page with a button on the MainPage.

To go there, we need a command in the MainPageViewModel class and bind it in the MainPage view.

 public class MainPageViewModel : ViewModelBase
 { 
     public DelegateCommand GoToSettings
     { 
         get;
         private set;
     } 
     //...
 } 

In the constructor, we initialize the GoToSettings property.

 public MainPageViewModel(ITwitterService twitterService, IWeatherService weatherService, INavigationService navigationService)
 { 
     _navigationService = navigationService;
     GoToSettings = new DelegateCommand(() =>
     { 
         _navigationService.Navigate("Settings", null); 
     }); 
 } 

In the constructor, we added a parameter: the INavigationService reference. This new dependency will be handled by the Unity container when resolving an instance of MainPageViewModel. The GoToSettingsCommand is composed of a single line of code where we call the Navigate method, where the first argument is the name of the page where we want to go, and the second argument is to add additional information. Since we have no additional data, we write null.

In this example, the Settings page allows us to change the background image of the main page. We notice that in the upper left corner of the application is a back button. This is handled by the UWP framework when it detects a navigation.

This back button can be different based on the device where the app is running: phone, tablet, or PC. For example, in a tablet with tablet mode enabled, it will appear on the navigation bar at the bottom of the device. In the MSDN, we can find all the details.

When we click the back button, we go back to the main page.

When navigating in our view-model, we can use two methods to detect when we land on a page or when we leave a page. OnNavigatedTo is called when navigation in performed to a page. OnNavigatingFrom is called when navigating away from the page.

public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary<string, object> viewModelState)
{
    base.OnNavigatedTo(e, viewModelState);
    //Loading state custom logic.
}

public override void OnNavigatingFrom(NavigatingFromEventArgs e, Dictionary<string, object> viewModelState, bool suspending)
{
    base.OnNavigatingFrom(e, viewModelState, suspending); 
    //Save state logic. 
} 

TL;DR

In this post, we explored the basic concept about navigating with Prism in UWP App with the Navigation Service and the events that Prism offers to detect the transition from one page to another.

If you want to learn more you can refer to the Prism official website and MSDN. Happy coding!