Hierarchical Navigation:
The Hierarchical Navigation Pages provide the Navigation Experience where the user is able to Navigate through Pages, Forwards and Backwards as desired. These Pages Implements Navigation in LIFO (Last-in, first-out) Structure.
If we are Designing our Application for Some Articles or some Things that contain more than single page, then it would be better to use Hierarchical Navigation.
In This Tutorial, we will design our Hierarchical Navigation Page through the Following steps.
Creating The Navigation Page:
First of all, we need to create The First Page That will point to the Next Page. The Hierarchical Navigation Set the Pages in Stack Using the NavigationPage Class. and the Pages In Hierarchical Navigation used to Navigate Through the stack of ContentPage Object.
The First Page Added to a Navigation Stack is Referred to as the Root Page of the Application. In order to create the root page, follow the given steps:
After that Open your App.xaml.cs file and Replace the present code with the following code in your App() Class.
public App ()
{
InitializeComponent();
MainPage = new NavigationPage(new Page1());
}
In Above Code, We Pushed the ContentPage Instance Page1 onto the Navigation stack, Where it becomes the Active Page and the Root page of the Application.
Push:
To Move From one Page to Another, The Application will Push a New Page onto the Navigation Stack, where it will Become the Active Page.
To Navigate to Page2 from page1, we need to Invoke the Method PushAsync(). in order to do this, first you need to create the second Instance of Contact Page. Create the second page by following the above Steps. After that Open your Page1.xaml file. and create the Button using the following code.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Navigation_Page.Page1"
>
<ContentPage.Content>
<StackLayout>
<!--If you want to show Label as mine-->
<Label Text="Home Page"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontSize="Large"
TextColor="#184757"
Font="bold, 40"
/>
<!--Create this button-->
<Button Text="Next" Clicked="nextbtn" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
After Creating the Button, Open your Page1.xaml.cs file and add the following method.
async void nextbtn (object sender, EventArgs e)
{
await Navigation.PushAsync(new Page2());
}
Using Above Method, When the User will click on the button present on home page, the Page2 instance will be pushed onto the Navigation stack, Where it Becomes the Active Page as shown in the following screenshots.
Pop
To Return back to the Previous Page, The Application Will Pop the current Page from the Navigation Stack and the top most page will become the active page.
When we press the back button on the device, the Application will pop the active page from the Navigation stack. There are three ways to Popped the active page. The first is Physical Button on device, The second is On-screen Button and third one is the Button that we can design Programmatically.
To Programmatically return to the original Page and pop the Active page, We need to Invoke the PopAsync() Method. To Create the Pop Button in your page, You first need to create the button in your Page2.xaml file same like the first button created. Then open your Page2.xaml.cs file and add the following method.
async void previousbtn (object sender, EventArgs e)
{
await Navigation.PopAsync();
}
Using Above Method, when the user will click on the back button, The Page2 instance will removed from the Navigation stack and the top most page will become active as shown in the following screenshots.
Back To Home Page From Anywhere:
If We are on Page # 28 through Navigation and we want to get back to home page, then the Navigation Property of each page Provides us a Method called PopToRootAsync() to do this job.
async void prevbtn (object sender, EventArgs e)
{
await Navigation.PopToRootAsync();
}
Using Above Method, The Application will Pops all but the Root page off the Navigation stack and Will make the root page Active page.
