The overarching goal of this book is to show how you can build a solid architecture based on design patterns and best practices; the objective of this chapter is to take our TripLog app one step closer to achieving that goal. By introducing MVVM into our TripLog app in Chapter 2, MVVM and DataBinding, we set up the app with a very clear pattern to separate the user interface from the rest of the logic in the app. Each subsequent chapter, starting with this one, further advances this concept of separation.
In Chapter 2, MVVM and DataBinding, we moved a large portion of the app logic into ViewModels; however, navigation is still being initiated from the pages (or views). In this chapter, we're going to move navigation into ViewModels as well.
Here is a quick look at what we'll cover in this chapter:
- Understanding the basics of the Xamarin.Forms navigation API
- Thinking about navigation in MVVM
- Creating a navigation service
- Updating the TripLog app to use the navigation service
Along with abstracting common user interface elements into a cross-platform API, Xamarin.Forms also abstracts navigation for iOS, Android, and Windows into a single, easy to use navigation service. Each mobile platform does navigation slightly different and has a slightly different navigation API; however, at their core, they all accomplish similar tasks and in most cases use a stack structure—last in, first out.
The Xamarin.Forms navigation API uses stack-like terminology, closely resembling the navigation APIs of iOS. The Xamarin.Forms navigation API is exposed through the Xamarin.Forms.INavigation interface, which is implemented via the Navigation property that can be called from any Xamarin.Forms.VisualElement object, but typically, Xamarin.Forms.Page. The Xamarin.Forms.NavigationPage also implements the INavigation interface and exposes public methods to perform common navigation tasks.
The Xamarin.Forms navigation API supports two types of navigation: standard and modal. Standard navigation is the typical navigation pattern where the user clicks or taps through a series of pages and is able to use either device/operating-system provided (back buttons on Android and Windows Phone) functionality or app provided (navigation bar on iOS and action bar on Android) elements to navigate back through the stack. Modal navigation is similar to the modal dialog concept in web apps where a new page is layered on top of the calling page, preventing interaction with the calling page until the user performs a specific action to close the modal page. On smaller form factor devices, modal pages typically take up the entire screen, whereas on larger form factors, such as tablets, modal pages may only take up a sub-set of the screen, more like a dialog. The INavigation interface exposes two separate read-only properties to view the standard and modal navigation stacks: NavigationStack and ModalStack.
The Xamarin.Forms.INavigation interface provides several methods to asynchronously push and pop pages onto the navigation and modal stacks:
PushAsync(Page page)andPushAsync(Page page, bool animated)to navigate to a new page.PopAsync()andPopAsync(bool animated)to navigate back to the previous page, if there is one.PushModalAsync(Page page)andPushModalAsync(Page page, bool animated)to modally display a page.PopModalAsync()andPopModalAsync(bool animated)to dismiss the current modally displayed page.
In addition to these methods, there are also a few methods that help you manipulate the navigation stack, since it is exposed as a read-only property:
InsertPageBefore(Page page, Page before)to insert a page before a specific page that is already in the navigation stackRemovePage(Page page)to remove a specific page in the navigation stackPopToRootAsync()andPopToRootAsync(bool animated)to navigate back to the first page and remove all others in the navigation stack
We've already used PushAsync a few times in the TripLog app to allow the user to move from page to page. In the next couple of sections of this chapter, we'll create a custom navigation service that extends the Xamarin.Forms navigation API, use it to move those instances of PushAsync from the pages into the ViewModels, and expose them through commands that will be data-bound to the page.