XAMARIN: GETTING STARTED WITH PRISM 6 (PART 3) – NAVIGATION

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.

Create Page.png

Figure 1. Creating Prism Content Page

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

Automatic Creation of our ViewModels.

Automatic ViewModel.jpg

Figure 2. Automatic creation of ViewModel

Automatic Mapping of Namespace for our ViewModel Locator.

ViewModel Locator

Figure 3. ViewModel Locator

Automatic registration of our created pages for our navigation service.

Navigation

Figure 4. Registration of Navigation

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

MainPage

Figure 5. Navigate Button.

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.

MainPageViewMode

Figure 6. MainPage ViewModel.

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

MainPage To Pag1.gif

Figure 7. Navigation from Main Page to Page 1

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.

Page1

Figure 8. Page 1 Xaml

Page2

Figure 9. Page 2 Xaml

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.

Page1ViewModel

Figure 10. Page1ViewModel

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

Page2ViewModel

Figure 11. Page2ViewModel

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.

FullNavigation

Figure 12. Full navigation

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.

NavigationParameter

Figure 13. Navigation Parameter from Main Page

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.

Page2ViewModelNavigationAware.jpg

Figure 14. INavigationAware

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

NavigationParameter.gif

Figure 15. Using 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 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s