Code Unboxing

For the third part of this Getting started Xamarin with Prism series, I would like to discuss about using  Navigation in Xamarin forms. We will use our previous project from our Part2 of the getting started series and here is the link for the Repository: https://github.com/KirkPatrickJunsay/XamarinPrismSample

Navigation service of Prism framework offers:

• A more decoupled navigation because in Prism Navigation there are no page references and no viewmodel references.
• Navigation is based on Uri or simply strings.
• Relative navigation (default) relative to the current Page.
• Absolute navigation replaces the entire navigation stack.
• INavigationService offers only two methods NavigateAsync and GoBackAsync
• All pages must be registered for navigation.

Let’s start to code, First let’s add two new Content Page Called Page1 and Page2 through Prism ContentPage.

Let me point some of the things that happened during the creation of our Prism Content Pages:

Automatic Creation of our ViewModels.

Automatic Mapping of Namespace for our ViewModel Locator.

Automatic registration of our created pages for our navigation service.

Now that we have created the necessary pages to perform our navigation let’s try to modify our MainPage View with a new button that when clicked will navigate to Page1

For our MainPageViewModel we need to add a property called _navigationService of type INavigationService which will hold our reference for Navigation Service in our Constructor. Then will add a Navigate Method which will be binded in our Button using the NavigateCommand property. The only caveat here as per Brian Lagunas the constructor should contain navigationService because of Container limitations.

Now let’s try to run our application and click the To Page1 button.

Now let’s try to setup our Navigation from Page 1 to Page 2 then from Page 2 back to Page 1. Let’s first modify our XAML for Pages 1 and 2 based on Figures 8 and 9.

For our Page1ViewModel let’s add our _navigationService that will hold the instance of our NavigationService coming from our Constructor. Next is to create properties of type DelegateCommand for our navigation to Page 2 and Navigation to Main Page.

For our Page2ViewModel contents, it is almost the same with our Page1ViewModel but instead of NavigateAsync will use GoBackAsync to going back to Page1.

Let’s try to run our application and try to navigate from our Main Page to Page 2 then back to our Main Page again.

Navigation Parameter

The last thing I would like to show to you is how to use the Navigation Parameter if you’re gonna pass data from one page to another page. Our scenario here is to pass the contents of our Main Page Entry field to our Page 1 Label.

Let’s modify our MainPageViewModel by adding our NavigationParamter in our Navigate Method as shown in Figure 13.

Now let’s modify our Page1ViewModel to accept our Navigation Parameter. So how do we do it ? We need to implement INavigationAware which implement two methods called OnNavigatedFrom and OnNavigatedTo. OnNavigateTo is triggered when we are being navigated then OnNavigatedFrom is being triggered when you are navigating away from the Page. To get the parameter, we need to search the Key (name) then we need to cast it to string because we know that our key value pair contains a string type.

Let’s try to run our application and see in action the Navigation parameter.

Source Code

https://github.com/KirkPatrickJunsay/XamarinPrismNavigation

Conclusion

Just a quick wrap up for Navigation service of Prism, we achieved a more decoupled system because instead of having a reference of the actual Page in order to navigate we used instead string reference that we used during our registration of Navigation Types in our App.cs file. We also learned about the Navigation Parameters in passing data between pages. I think for the next part of this series I would like to discuss the Message system of Prism in Xamarin forms.

Happy coding 🙂