Xamarin.Forms - Hierarchical Navigation App

Introduction

This article demonstrates how to use the navigation pages to perform navigation in a stack of pages where the user is able to navigate through pages, forward and backward as desired, and the class implements navigation as a last-in, first-out (LIFO) stack of the page object.
  • PushAsync
    Move from one page to another; the application will push a new page onto the navigation stack where it will become the active page.

  • PopAsync
    To return back to the previous page, the application will pop the current page up from the navigation stack, and the new topmost page becomes the active page.

Let's start :)

Step 1
 
You can create a new Xamarin.Forms app by going to File ->> New -> Visual C# -> Cross Platform >> Cross-Platform App (Xamarin.Native or Xamarin.Forms), give the application name, and press OK.

(Project Name : HierarchicalNavigation)

 
Step 2

Open Solution Explorer  >> HierarchicalNavigation(PCL) >> right click and select "New Item". In the popup window, select Cross Platform   ->> Class.
 
This way, you can add a new class. Create a new Class named MainPage1, double-click to get into its design view, and insert the code given below.

CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace NavigtionHirechical  
  9. {  
  10.     class MainPage1 : ContentPage  
  11.     {  
  12.         public MainPage1()  
  13.         {  
  14.   
  15.             var nextPageButton = new Button { Text = "Next Page", VerticalOptions = LayoutOptions.CenterAndExpand };  
  16.             nextPageButton.Clicked += NextPageButton_Clicked;  
  17.   
  18.             Title = "MainPage";  
  19.             Content = new StackLayout  
  20.             {  
  21.                   
  22.                 Children =  
  23.                  {  
  24.                   
  25.                      nextPageButton  
  26.                  }  
  27.             };  
  28.         }  
  29.   
  30.         async void NextPageButton_Clicked(object sender, EventArgs e)  
  31.         {  
  32.             await Navigation.PushAsync (new MainPage2());  
  33.         }  
  34.                  
  35.     }  
  36. }   
 
 
Step 3

Similarly, create another class named MainPage2 and add the following code.

CS Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8. namespace NavigtionHirechical  
  9. {  
  10.     public class MainPage2 : ContentPage  
  11.     {  
  12.         public MainPage2()  
  13.         {  
  14.             var nextPageButton = new Button { Text = "Next MainPage3", VerticalOptions = LayoutOptions.CenterAndExpand };  
  15.             nextPageButton.Clicked += OnNextPageButtonClicked;  
  16.   
  17.             var previousPageButton = new Button { Text = "Previous MainPage1", VerticalOptions = LayoutOptions.CenterAndExpand };  
  18.             previousPageButton.Clicked += OnPreviousPageButtonClicked;  
  19.   
  20.             Title = "MainPage 2";  
  21.             Content = new StackLayout  
  22.             {  
  23.                 Children = {  
  24.                     nextPageButton,  
  25.                     previousPageButton  
  26.                 }  
  27.             };  
  28.         }  
  29.         async void OnNextPageButtonClicked(object sender, EventArgs e)  
  30.         {  
  31.             await Navigation.PushAsync(new MainPage3());  
  32.         }  
  33.   
  34.         async void OnPreviousPageButtonClicked(object sender, EventArgs e)  
  35.         {  
  36.             await Navigation.PopAsync();  
  37.         }  
  38.     }  
  39. }  
 
 
Step 4

In this step, add a new class named MainPage3 and add the following code.

CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.       
  8.   
  9. namespace NavigtionHirechical  
  10. {  
  11.     class MainPage3 : ContentPage  
  12.     {  
  13.   
  14.         public MainPage3()  
  15.         {  
  16.             var nextPageButton = new Button { Text = "Next Navigation", VerticalOptions = LayoutOptions.CenterAndExpand };  
  17.             nextPageButton.Clicked += OnNextPageButtonClicked;  
  18.   
  19.             var previousPageButton = new Button { Text = "Previous MainPage2", VerticalOptions = LayoutOptions.CenterAndExpand };  
  20.             previousPageButton.Clicked += OnPreviousPageButtonClicked;  
  21.   
  22.             Title = "Page 2a";  
  23.             Content = new StackLayout  
  24.             {  
  25.                 Children = {  
  26.                     nextPageButton,  
  27.                     previousPageButton  
  28.                 }  
  29.             };  
  30.         }  
  31.         async void OnNextPageButtonClicked(object sender, EventArgs e)  
  32.         {  
  33.             await Navigation.PushAsync(new NavigationPage1());  
  34.         }  
  35.   
  36.         async void OnPreviousPageButtonClicked(object sender, EventArgs e)  
  37.         {  
  38.             await Navigation.PopAsync();  
  39.         }  
  40.   
  41.     }  
  42. }  
 
 
Step 5

Now, add another new class named NavigationPage1. Here is the code for this class.

CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7.   
  8.   
  9. namespace NavigtionHirechical  
  10. {  
  11.     class NavigationPage1 : ContentPage  
  12.     {  
  13.         public NavigationPage1()  
  14.         {  
  15.             var previousPageButton = new Button { Text = "Previous MainPage", VerticalOptions = LayoutOptions.CenterAndExpand };  
  16.             previousPageButton.Clicked += OnPreviousPageButtonClicked;  
  17.   
  18.             var rootPageButton = new Button { Text = "Return to Root MainPage", VerticalOptions = LayoutOptions.CenterAndExpand };  
  19.             rootPageButton.Clicked += OnRootPageButtonClicked;  
  20.   
  21.             var insertPageButton = new Button  
  22.             {  
  23.                 Text = "Insert Page 2a Before Page 3",  
  24.                 VerticalOptions = LayoutOptions.CenterAndExpand  
  25.             };  
  26.             insertPageButton.Clicked += OnInsertPageButtonClicked;  
  27.   
  28.             var removePageButton = new Button { Text = "Remove MainPage 2", VerticalOptions = LayoutOptions.CenterAndExpand };  
  29.             removePageButton.Clicked += OnRemovePageButtonClicked;  
  30.   
  31.             Title = "Final Page";  
  32.             Content = new StackLayout  
  33.             {  
  34.                 Children = {  
  35.                     previousPageButton,  
  36.                     rootPageButton,  
  37.                     insertPageButton,  
  38.                     removePageButton  
  39.                 }  
  40.             };  
  41.         }  
  42.   
  43.         async void OnPreviousPageButtonClicked(object sender, EventArgs e)  
  44.         {  
  45.             await Navigation.PopAsync();  
  46.         }  
  47.   
  48.         async void OnRootPageButtonClicked(object sender, EventArgs e)  
  49.         {  
  50.             await Navigation.PopToRootAsync();  
  51.         }  
  52.   
  53.         void OnInsertPageButtonClicked(object sender, EventArgs e)  
  54.         {  
  55.             var page2a = Navigation.NavigationStack.FirstOrDefault(p => p.Title == "Page 2a");  
  56.             if (page2a == null)  
  57.             {  
  58.                 Navigation.InsertPageBefore(new MainPage3(), this);  
  59.             }  
  60.         }  
  61.   
  62.         void OnRemovePageButtonClicked(object sender, EventArgs e)  
  63.         {  
  64.             var page2 = Navigation.NavigationStack.FirstOrDefault(p => p.Title == "Page 2");  
  65.             if (page2 != null)  
  66.             {  
  67.                 Navigation.RemovePage(page2);  
  68.             }  
  69.         }  
  70.     }  
  71. }  
 
 
Step 6

After the design view creation, go to Solution Explorer >> HierarchicalNavigation(PCL) >> click to open App.xaml.cs. The code is given below.

CS code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace NavigtionHirechical  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage(new MainPage1());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  29.         protected override void OnResume()  
  30.         {  
  31.             // Handle when your app resumes  
  32.         }  
  33.     }  
  34. }  
 
 
Step 7

Click  'F5'  or "Build " to  'Run' your application. Running this project, you will have the result like below.

 
Finally, we have successfully created a Xamarin.Forms Hierarchical Navigation Application.

Up Next
    Ebook Download
    View all
    Learn
    View all