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;
  8. namespace NavigtionHirechical
  9. {
  10. class MainPage1 : ContentPage
  11. {
  12. public MainPage1()
  13. {
  15. var nextPageButton = new Button { Text = "Next Page", VerticalOptions = LayoutOptions.CenterAndExpand };
  16. nextPageButton.Clicked += NextPageButton_Clicked;
  18. Title = "MainPage";
  19. Content = new StackLayout
  20. {
  22. Children =
  23. {
  25. nextPageButton
  26. }
  27. };
  28. }
  30. async void NextPageButton_Clicked(object sender, EventArgs e)
  31. {
  32. await Navigation.PushAsync (new MainPage2());
  33. }
  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;
  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;
  17. var previousPageButton = new Button { Text = "Previous MainPage1", VerticalOptions = LayoutOptions.CenterAndExpand };
  18. previousPageButton.Clicked += OnPreviousPageButtonClicked;
  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. }
  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;
  9. namespace NavigtionHirechical
  10. {
  11. class MainPage3 : ContentPage
  12. {
  14. public MainPage3()
  15. {
  16. var nextPageButton = new Button { Text = "Next Navigation", VerticalOptions = LayoutOptions.CenterAndExpand };
  17. nextPageButton.Clicked += OnNextPageButtonClicked;
  19. var previousPageButton = new Button { Text = "Previous MainPage2", VerticalOptions = LayoutOptions.CenterAndExpand };
  20. previousPageButton.Clicked += OnPreviousPageButtonClicked;
  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. }
  36. async void OnPreviousPageButtonClicked(object sender, EventArgs e)
  37. {
  38. await Navigation.PopAsync();
  39. }
  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;
  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;
  18. var rootPageButton = new Button { Text = "Return to Root MainPage", VerticalOptions = LayoutOptions.CenterAndExpand };
  19. rootPageButton.Clicked += OnRootPageButtonClicked;
  21. var insertPageButton = new Button
  22. {
  23. Text = "Insert Page 2a Before Page 3",
  24. VerticalOptions = LayoutOptions.CenterAndExpand
  25. };
  26. insertPageButton.Clicked += OnInsertPageButtonClicked;
  28. var removePageButton = new Button { Text = "Remove MainPage 2", VerticalOptions = LayoutOptions.CenterAndExpand };
  29. removePageButton.Clicked += OnRemovePageButtonClicked;
  31. Title = "Final Page";
  32. Content = new StackLayout
  33. {
  34. Children = {
  35. previousPageButton,
  36. rootPageButton,
  37. insertPageButton,
  38. removePageButton
  39. }
  40. };
  41. }
  43. async void OnPreviousPageButtonClicked(object sender, EventArgs e)
  44. {
  45. await Navigation.PopAsync();
  46. }
  48. async void OnRootPageButtonClicked(object sender, EventArgs e)
  49. {
  50. await Navigation.PopToRootAsync();
  51. }
  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. }
  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;
  6. using Xamarin.Forms;
  8. namespace NavigtionHirechical
  9. {
  10. public partial class App : Application
  11. {
  12. public App()
  13. {
  14. InitializeComponent();
  16. MainPage = new NavigationPage(new MainPage1());
  17. }
  19. protected override void OnStart()
  20. {
  21. // Handle when your app starts
  22. }
  24. protected override void OnSleep()
  25. {
  26. // Handle when your app sleeps
  27. }
  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.