Multiple Button Navigation In Xamarin.Forms Application

Introduction

This article demonstrates Multiple Button Navigation In Xamarin.Forms applications. Xamarin is a platform that allows us to create a multi-platform mobile application for platforms, like Android, Windows, IOS through a single integrated development environment (IDE).

Let's start.

Step 1

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.

Select Cross-Platform app, then give your project a name and location.

Step 2

Open Solution Explorer >> Project Name (Portable) >> App.xaml.cs >> Double click will open the design view of this page.

The code is given below.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace Navigation
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Step 3

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> drawable >> Add >> Existing Item.

Next, a dialogue box will open. Choose image location and add images.

The images are added successfully.

Step 4

Next, Open Solution Explorer >> Project Name (Portable) >> Right-Click >> Add >> New Item or Ctrl+Shift+A.

A new dialogue box will open. Now, add the XAML page and give it a name. Click the "Add" button.

Similarly, add the XAML page and give your name. "Page 2"

Similarly, add the XAML page and give your name. "Page 3"

Step 5

Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the design view of this page.

The code is given below.

Xaml Code

We are creating three buttons inside the StackLayout. "Android, Windows, Ios".

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Navigation"
x:Class="Navigation.MainPage">
<ContentPage.Content>
<StackLayout>
<Button Text="Android" Clicked="Button_Clicked"/>
<Button Text="Windows" Clicked="Button_Clicked_1"/>
<Button Text="Ios" Clicked="Button_Clicked_2"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 7

Open Solution Explorer >> Project Name >> page1.xaml. Open the design view of this page.

The code is given below.

Xaml Code

<?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="Navigation.Page1">
<ContentPage.Content>
<StackLayout>
<Image Source="Android.png"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 8

Open Solution Explorer >> Project Name >> Page2.xaml. Open the design view of this page.

The code is given below.

Xaml Code

<?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="Navigation.Page2">
<ContentPage.Content>
<StackLayout>
<Image Source="Windows.png"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 9

Open Solution Explorer >> Project Name >> Page3.xaml.cs. Open the design view of this page.

The code is given below.

Xaml Code

<?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="Navigation.Page3">
<ContentPage.Content>
<StackLayout>
<Image Source="Ios.png"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 10

Open Solution Explorer >> Project Name >> MainPage.xaml.cs. Open the design view of this page.

The code is given below.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Navigation
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page1());
}
private async void Button_Clicked_1(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page2());
}
private async void Button_Clicked_2(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page3());
}
}
}

Step 11

Next, select the Build & Deploy option, followed by selecting from the list of Android Emulator or Simulator. You can choose any API (Application Program Interface) Level Emulator or Simulator to run it.

Output

After a few seconds, you will see your app working.

Click the button in Android in Navigation for "Page 1", Click the button in Windows in Navigation for "Page 2" and click the button in IOS in Navigation for "Page 3".

Finally, we have successfully created Xamarin.Forms Multiple Button Navigation.

2 Comments

Join the conversation! Your thoughts help the community grow.

Salman Khan7y ago
You have not shown how that back button is working?
- Ajithkumar J7y ago
  Just create a button and the button work for navigating the process automatically show the top arrow mark just click in the back or you create button and the button clicked event in the backend button code is navigate the main page.