Navigation In Xamarin.Forms

Umair Hassan
7y
10.3k
0
2

100

Article

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.

xamarin

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