Applying Simple Navigation in Xamarin Forms

How do you switch pages in Xamarin.Forms? Xamarin.Forms gives us some simple but powerful tools to control navigation in our apps.

One of the most important functionalities of an application is to be able to navigate between different pages, since this gives us the ability to interact with all the features that an app provides us. To do it, we can use a framework or just implement it in a simple way! In this case, we will be learning about how to do simple navigations in Xamarin Forms! The topics will be divided in the following points:

➖ What Navigation Is
➖ Push & Pop
➖ Navigation Manipulation
➖ Passing Arguments
➖ Additional Tips

What Navigation Is

Navigation is nothing more than the action that allows pages to be changed inside our applications.

To get it, we use the NavigationPage class, which handles the navigation in a hierarchical mode, creating a LIFO stack of pages. LIFO stands for “last in, first out,” which means that the last page to enter (push) is the first one to pop out.

Push & Pop

There are two ways to navigate: with Push or Pop. When we want to pass to a new page, this is added to the navigation stack—this is called Push. But if we want to go Back, the stack is just returned with the page corresponding to the previous page in the stack, removing the active page (the page we’re on now)—this is called Pop.

Now let’s see how use them!

Push

To use in C#:

async void NextPage (object sender, EventArgs e) 
{
         await Navigation.PushAsync(new YourPageName());
}

Pop

To use in C#:

async void BackToPage (object sender, EventArgs e) 
{
        await Navigation.PopAsync();
} 

Navigation Manipulation

Navigation also gives us the InsertPageBefore and RemovePage methods, which allow us to manipulate the Page that will be displayed in the navigation stack of our application.

InsertPageBefore

This method inserts a specific Page in the navigation stack before an existing page in the stack. This method receives two parameters: active page and the previous page.

Navigation.InsertPageBefore (new MainPage (), this);

RemovePage

This method removes a specific Page in the navigation stack. This method receives just one parameter, which is the page that will be removed.

Navigation.RemovePage (new MainPage);

But … what happens if we want to remove all the navigation stack?

To do this, we have the PopToRootAsync method, which is responsible for removing all the pages contained in the navigation stack except the root page, making it the active page.

async void ClearNavigationStack (object sender, EventArgs e)
{
        await Navigation.PopToRootAsync ();
}

Passing Arguments

It’s very important to establish the communication between those pages, especially if you need to pass some data. We have two ways to get this: Through a constructor or a BindingContext object. Let’s understand each one!

Using the constructor we can get it in two steps:

Step 1: Adding a parameter that you need in the constructor page.

public MainPage (string YourName) 
{ 
    InitializeComponent (); 
    Name = YourName;
}

Step 2: Passing the data when you call the page used before. (MainPage)

await Navigation.PushAsync(new YourPageName("MariaWhite"));

Using a Binding Context object:

In this example, let’s create a method named FillDataClicked, and inside it let’s add some object data (in this case, with the Contact class). Then pass the created object in your page BindingContext.

async void FillDataClicked (object sender, EventArgs e)
{
    var contact = new Contact {
        Name     = "Merrie", 
        LastName = "White",
        Country  = "USA"
  };
  
   var contactsPage = new ContactsPage (); 
   contactsPage.BindingContext = contact;
   await Navigation.PushAsync (contactsPage);
}

Additional Tips

➖ To remove the Backbutton: You just have to use the following line in your XAML properties.

NavigationPage.HasBackButton="False"

➖ To add some control to your navigation bar:
To access to the navigation bar control, you just have to add the <NavigationPage.TitleView> tags. Inside these tags, you can add any control you need. (For example: you can add a button, a label, an image.) In the example, I added a Picker to select an age range.

<NavigationPage.TitleView>
       <Picker Title="Select age range:">
           <Picker.Items>
               <x:String>18 - 21</x:String>
               <x:String>21 - 30</x:String>
               <x:String>30 onwards</x:String>
           </Picker.Items>
       </Picker>
</NavigationPage.TitleView>

➖To hide the Navigation Bar: You just have to use the following line in your XAML properties.

    NavigationPage.HasNavigationBar="false"    

That’s all for today! I hope this article is useful for you!

Thanks for reading!

References: https://docs.microsoft.com/es-es/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical