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()
- {
-
- }
-
- protected override void OnSleep()
- {
-
- }
-
- protected override void OnResume()
- {
-
- }
- }
- }
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.