XamarinT2 Light_1200x303

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

Page 1 has an arrow over to page 2, which is set on top of it. Then Page 2 has an arrow to Page 3, which is set on top of both.

To use in C#:

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

Pop

Page 1 is on top of two other pages. It has an arrow to Page 2, which shows when Page 1 is removed. Another arrow shows Page 3 when Page 2 is removed.

To use in C#:

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

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

"Original navigation" stack shows three pages, with Actual Page on the top. "With a page inserted before actual page" shows the same stack with an added page behind Actual Page labeled "Inserted page".

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

"Original navigation stack" shows three pages, with Actual Page on top. An arrow says "Remove second page", and "The Result" shows a stack of two pages with Actual Page still on top but the page behind it is gone.

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


LeomarisReyes
About the Author

Leomaris Reyes

Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of  Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.

Related Posts

Comments

Comments are disabled in preview mode.