In this section, we will take a look at the Xamarin.Forms Navigation API architectural pattern, as well as gain an understanding of the different types of navigation patterns that are available for us. The Xamarin.Forms Navigation API is exposed through the Xamarin.Forms.INavigation interface, and is implemented by using the Navigation property. This can be called from any Xamarin.Forms object, typically from the Xamarin.Forms.Page, which inherits from the ContentPage class that is part of the Xamarin.Forms.Core assembly namespace.
The Xamarin.Forms Navigation API supports two different types of navigation: Hierarchical and Modal. The following table provides a brief description of what each area is used for:
|
Type |
Description |
|
Hierarchical |
The Hierarchical navigation type is basically a stack-based navigation pattern that enables users to move iteratively through each of the Views within the hierarchy, and then navigate back out again, one screen at a time, thus removing them from the navigation stack. |
|
Modal |
The Modal navigation type is a single pop-up screen that interrupts the hierarchical navigation by requiring that the user respond to an action, prior to the screen or popup being dismissed. |
The Hierarchical navigation provides a means of navigating through the navigational structure and is the most widely used approach. This involves the user tapping their way forward through a series of pages and navigating back through the navigation stack, using the navigation methods available on Android or iOS devices.
The following diagram shows the process of moving from one page to another within the Hierarchical model, and what happens when popping pages from the navigation stack:
As you can see from the preceding screenshot, whenever a View is pushed onto the navigation stack, this will become the most active page. Alternatively, when you want to return to the previous page, the application will start to Pop the current page from the navigation stack, and the new top-most View will then become the active View. The Modal navigation pattern displays a View on top of the current View that prevents the user from interacting with the View underneath it. This approach provides the user with choices for what they want to do prior to the Modal View being closed.
The INavigation interface, which is part of the Xamarin.Forms.NavigationPage, implements and exposes two separate read-only properties: NavigationStack and ModalStack. This will allow you to view both the Hierarchical and Modal navigation stacks. The INavigation interface provides you with a number of methods that allow you to asynchronously Push (Add) and Pop (Remove) Views onto the navigation stack and modal stacks, which are explained in the following table, along with a brief description of what each area is used for:
|
Type |
Description |
|
PushAsync(Page page) |
The PushAsync(Page page) method adds a new Page to the top of the navigation stack that enables users to move deeper within the View hierarchy. |
|
PopAsync() |
The PopAsync() method allows you to navigate back through the navigation stack to the previous page, but only if one has previously been added to the navigation stack. |
|
PushModalAsync(Page page) |
The PushModalAsync(Page page) method allows you to display the Page modally whenever you need to display an informational message to the user, or to request information from the user. A good example of a Modal page would be a sign-in page where you need to get the user's credentials. |
|
PopModalAsync() |
The PopModalAsync() method allows you to dismiss the currently displayed Page and returns you through the navigation stack to the Page that is displayed underneath. |
As well as the aforementioned navigational methods, the Xamarin.Forms.INavigation interface provides you with a number of additional methods that will help you manipulate the navigation stack, which are explained in the following table, along with a brief description of what each area is used for:
|
Type |
Description |
|
InsertPageBefore(Page page, Page before) |
The InsertPageBefore(Page page, Page before) method allows you to insert a new Page before a specific Page that has already been added to the navigation stack. |
|
RemovePage(Page page) |
The RemovePage(Page page) method allows you to remove a specific Page within the navigation stack. |
|
PopToRootAsync() |
The PopToRootAsync() method allows you to navigate back to the first Page that is contained within the navigation stack, as well as remove all of the other Pages contained within the navigation stack hierarchy. |
Now that you have a reasonably good understanding of each of the components that are contained within the Navigation API architectural pattern, our next step is to begin learning about some of the different approaches for navigating between Views and ViewModels.