Introduction

In this article we will discuss how to navigate between pages using Xamarin Forms. Page Navigation is used to switch between two or more pages in an application.

Prerequisites
  • Windows10
  • Visual Studio 2017 Community Edition
  • Xamarin Package
Step 1

Open Visual Studio 2017 Community Edition then go to File -> New -> Project click on Project. Now, a new window will open in that window under installed select Visual C# -> Cross -Platform. Now, select Cross Platform App (Xamarin), now give the name of the project and set the location for that folder and then click OK.

Xamarin

Step 2

Now a new window will open. In that window select Blank App and then select Xamarin.Forms and select Portable Class Library (PCL) and click OK.

Xamarin

Step 3

Now, select the Minimum Version and Target Version for UWP application and then click OK.

Xamarin

Step 4

Now, in Solution Explorer under Portable class right click and go to Add -> New Item and click on it.

Xamarin

Now, a new window will open; in that window under installed select Visual C# select Content Page and give the name of that file i.e., when we click on navigate button then it will navigate to this page and click OK.

Xamarin

Step 5

Now, in Solution Explorer under Portable expand App.xaml and select App.xaml.cs file.

Xamarin

Now, under public add the navigation command:

C# Code

MainPage = new NavigationPage(new Page_Navigation_Using_Xamarin_Forms.MainPage());

Xamarin

Step 6

Now open the MainPage.xaml file and set the Title of the MainPage and write the XAML code for MainPage.

XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Page_Navigation_Using_Xamarin_Forms" x:Class="Page_Navigation_Using_Xamarin_Forms.MainPage" Title="First Page">
  3. <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
  4. <Label Text="This is the first page of this application" FontSize="Medium" />
  5. <Button Text="Navigate to Second Page" Clicked="Onbtn_Clicked" BackgroundColor="Blue" /> </StackLayout>
  6. </ContentPage>
Xamarin
Step 7

Now open the MainPage.xaml.cs file and write the C# code in that,

C# 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;
  7. namespace Page_Navigation_Using_Xamarin_Forms {
  8. public partial class MainPage: ContentPage {
  9. public MainPage() {
  10. InitializeComponent();
  11. }
  12. private async void Onbtn_Clicked(object sender, EventArgs e) {
  13. await Navigation.PushAsync(new SecondPage());
  14. }
  15. }
  16. }
Xamarin

Step 8

Now open the SecondPage.xaml file and write the following XAML code in it and set the Title of that page.

XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Page_Navigation_Using_Xamarin_Forms.SecondPage" Title="Second Page">
  3. <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
  4. <Label Text="Welcome to the Second Page of this application" FontSize="Medium" />
  5. <Button Text="Navigate to First Page" BackgroundColor="Green" Clicked="OnBtn_Clicked" /> </StackLayout>
  6. </ContentPage>
Xamarin

Step 9

Now open the SecondPage.xaml.cs file and write the C# code in it.
  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;
  7. using Xamarin.Forms.Xaml;
  8. namespace Page_Navigation_Using_Xamarin_Forms {
  9. [XamlCompilation(XamlCompilationOptions.Compile)]
  10. public partial class SecondPage: ContentPage {
  11. public SecondPage() {
  12. InitializeComponent();
  13. }
  14. private async void OnBtn_Clicked(object sender, EventArgs e) {
  15. await Navigation.PushAsync(new Page_Navigation_Using_Xamarin_Forms.MainPage());
  16. }
  17. }
  18. }
Xamarin
Step 10

Now open Solution Explorer and set the Portable file as the startup project.

Xamarin

Step 11

Now, build the Portable file fom the Solution Explorer.

Xamarin

Step 12

After the successful build of the Portable class now select the type of application you want to run and then click on the Start button.

Xamarin

Step 13

After clicking on the Start button your application will execute.

Xamarin

Xamarin

Now, click on the Navigate to Second Page button and you will be taken to the second page of the application.

Xamarin

Again Click on the Navigate to First Page button and you will be taken to the first page of the application i.e., MainPage of this application.

Xamarin

Conclusion

Now, we have successfully created an Xamarin Forms Application for navigating between two pages.