Tag Archives: prims

Prism UWP for beginners: navigation

In this post we’ll talk about the navigation with Prism in UWP. With navigation I mean the technique to go from one page to another of your app. The operation in UWP/XAML is tipically 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 in our help 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 we’ll navigate to that page with a button in the MainPage.

Immagine

To go to 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 Unity container when resolving an instance of MainPageViewModel. The GoToSettingsCommand is composed by a single line of code where we call the Navigate method with the first argument that 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 backgorund image of the main page. We notice that in the upper left corner of the application a back. This is handeld by the UWP framwork when 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 botton of the device. In the MSDN we can find al the details.

Screenshot_2.png

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 into a page or when we leave a page. OnNavigatedTo is callaed when navigation in performed to a page. OnNavigatingFrom is called when navigating away from the page.

   public override void OnNavigatedTo(NavigatedToEventArgs e, Dictionary viewModelState)
        {
            base.OnNavigatedTo(e, viewModelState);

//Loading state custom logic.
        }

        public override void OnNavigatingFrom(NavigatingFromEventArgs e, Dictionary 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!

Prism UWP posts

How to get started with Prism in 3 easy steps

In this post we explore the basics of Prism to create a mantainable and scalable WPF application.

IC368873.png

How to get started

  1. Download the nuget Prims.Xyz package for your Platform: in this example for WPF (Prims.WPF and Prism.Unity) with Visual Studio;
  2. Create a bootstrapper;
  3. Edit App.xaml and App.xaml.cs files;
  4. (Bonus point) Reorganize our project.

With this procedure we are setting the foundation for our Prism-enabled app.

1. Download

With the Manage Nuget tool in Visual Studio download the following packages: Prims.WPF and Prims.Unity. Visual Studio will take care of the process and at the end we’ll have these packages installed:

s1.png

2. Create a Bootstrapper

In our project we add a new Class. The name is not important but it has to derive from UnityBootstrapper.

using Microsoft.Practices.Unity;
using Prism.Unity;
using System.Windows;

namespace IC6.Prism
{
 class Bootstrapper : UnityBootstrapper
 {
   protected override DependencyObject CreateShell()
   {
    return Container.Resolve<MainWindow>();
   }

 protected override void InitializeShell()
   {
    Application.Current.MainWindow.Show();
   }
 }
}

3. Edit App.xaml and App.xaml.cs files.

In our project we edit the App.xaml to remove the StartupUri attribute since now that part of the initialization is handled by Prism with Unity.

<Application x:Class="IC6.Prism.App"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:IC6.Prism">
 </Application.Resources>

 </Application.Resources>
</Application>

In the code behind file (App.xaml.cs) we override the OnStartup method to implement our custom startup logic that leverages the Bootstrapper.

using System.Windows;

namespace IC6.Prism
{
 public partial class App : Application
 {
   protected override void OnStartup(StartupEventArgs e)
   {
    base.OnStartup(e);

    var bootstrapper = new Bootstrapper();
    bootstrapper.Run();
   }
 }
}

4. Bonus point

Since we’re using Prism to get the most from MVVM pattern (and other features) we are going also to better organize our project. We delete the MainWindow.xaml and its code behind files from the solution, then we create a new folder called Views and finally create a new Window called MainWindow inside. This is the result.

s2.png

Back to school time

We’ve started this post with just code and not so much theory about what we are doing.

Why do we need a bootstrapper? A Prism application requires registration and configuration during the application startup process. This is known as bootstrapping the application. The Prism bootstrapping process includes creating and configuring a module catalog, creating a dependency injection container such as Unity, configuring default region adapter for UI composition, creating and initializing the shell view, and initializing modules.

In a traditional Windows Presentation Foundation (WPF) application, a startup Uniform Resource Identifier (URI) is specified in the App.xaml file that launches the main window.
In an application created with the Prism Library, it is the bootstrapper’s responsibility to create the shell or the main window. This is because the shell relies on services, such as the Region Manager, that need to be registered before the shell can be displayed.

Dependency Injection

Applications built with the Prism Library rely on dependency injection provided by a container. The library provides assemblies that work with Unity and it allows us to use other dependency injection containers. Part of the bootstrapping process is to configure. this container and register types with the container.

TL;DR

In this post we introduced Prims and made baby steps. With this approach we’re setting the architecure of our app to be scalable and mantainable. In the next posts we’ll go forward and learn other Prism foundamentals.

Readings

Dependency Injection: https://en.wikipedia.org/wiki/Dependency_injection

Prism GitHub homepage: https://github.com/PrismLibrary/Prism