Navigation In Xamarin.Forms

We will discuss the following points in this article,

• Introduction to Navigation Page
• Practical example of navigation with output on Android and Windows desktop application
• Make your own Back button on Navigation Page
• How to remove Navigation Bar
• How to disable the device Back button

Tools

• Microsoft Visual Studio or Xamarin Studio

Technology

• Microsoft XAML and C-sharp

Introduction

If you are familiar with Xamarin.forms, you should be familiar with the concept that it is used to develop cross-platform mobile applications. In this article, we will go through an example of navigation in Xamarin.forms. We will navigate from one page to another and also, will explore its properties to make the navigation better.

Let's start our discussion with defining the Navigation Page.

It is used to make navigation between pages, i.e., move from one page to another. Most of the mobile applications have more than one pages. So, you must use navigation page in your application to move from one page to another.

Navigation page looks like the image below.

Navigation Page

Now, let's go through a simple example and navigate between two pages.

Firstly, we have to make a simple View page. In this example, we will make a View page that contains a button to move towards the next page.

XAML

<?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="Practice__app.MainPage"
             >

    <Button x:Name="btn" Text="Next Page" Clicked="btn_Clicked"></Button>

</ContentPage>

And on its click-event handler, the code looks like the following.

Code

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

"NextPage" is the name of second page declared in this application. In this application, you have to make two pages - Main page and Second page.

Go to App.xaml.cs and after InitializeComponent(); you have to declare your navigation page like this.

Code

MainPage = new NavigationPage(new MainPage());

Output on Android and Windows desktop



And by clicking on the "Next Page" button, you are navigated to the next page.

Output when clicked on the Next Page button



Back button

What if you want to set your own Back button on Next Page?

Make a button on next page and set its Click event.

XAML

<Button x:Name="Back" Clicked="Back_Clicked" Text="Back"></Button>

Code

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

For this purpose, we will use PopAsync() method.

Remove Navigation bar

The next page is shown with a bar on the top. That contains Back button. This bar is also shown on your Main page. This is the default behavior of application. But, what if you want to hide that bar?

NavigationPage.HasNavigationBar="False"

This is used to remove the navigation bar from your page. Use this code on the specific page to remove its navigation bar and the XAML looks like below.

<?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="Practice__app.NextPage"
             NavigationPage.HasNavigationBar="False"
             >
</ContentPage>

Output on Android and Windows desktop



Here we go. No navigation bar is displayed on your next page.

Disable Back Button

But wait! There’s another problem; user can move to previous page by using back button on Android phone or by using back button displaying on the top of Windows desktop application. If you want the users to not to go on the previous page again, use the following code to disable back button.

For this purpose, you have to override OnBackButtonPressed() method on your NextPage.xaml.cs file.

Code

protected override bool OnBackButtonPressed()
      {
          return true;
      }

After overriding this function now, your user will not move to the previous page by using the back button on the device.