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).
Xamarin
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.
Xamarin
Step 2
Open Solution Explorer >> Project Name (Portable) >> App.xaml.cs >> Double click will open the design view of this page.
Xamarin
The code is given below.
Xamarin
C# Code
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  6. using Xamarin.Forms;
  8. namespace Navigation
  9. {
  10. public partial class App : Application
  11. {
  12. public App()
  13. {
  14. InitializeComponent();
  16. MainPage = new NavigationPage(new MainPage());
  17. }
  19. protected override void OnStart()
  20. {
  21. // Handle when your app starts
  22. }
  24. protected override void OnSleep()
  25. {
  26. // Handle when your app sleeps
  27. }
  29. protected override void OnResume()
  30. {
  31. // Handle when your app resumes
  32. }
  33. }
  34. }
Step 3
Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-Click >> drawable >> Add >> Existing Item.
Xamarin
Next, a dialogue box will open. Choose image location and add images.
Xamarin
The images are added successfully.
Xamarin
Step 4
Next, Open Solution Explorer >> Project Name (Portable) >> Right-Click >> Add >> New Item or Ctrl+Shift+A.
Xamarin
A new dialogue box will open. Now, add the XAML page and give it a name. Click the "Add" button.
Xamarin
Similarly, add the XAML page and give your name. "Page 2"
Xamarin
Similarly, add the XAML page and give your name. "Page 3"
Xamarin
Step 5
Open Solution Explorer >> Project Name >> Mainpage.xaml. Open the design view of this page.
Xamarin
The code is given below.
Xamarin
Xaml Code
We are creating three buttons inside the StackLayout. "Android, Windows, Ios".
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:Navigation"
  5. x:Class="Navigation.MainPage">
  6. <ContentPage.Content>
  7. <StackLayout>
  8. <Button Text="Android" Clicked="Button_Clicked"/>
  9. <Button Text="Windows" Clicked="Button_Clicked_1"/>
  10. <Button Text="Ios" Clicked="Button_Clicked_2"/>
  11. </StackLayout>
  12. </ContentPage.Content>
  13. </ContentPage>
Step 7
Open Solution Explorer >> Project Name >> page1.xaml. Open the design view of this page.
Xamarin
The code is given below.
Xamarin
Xaml Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="Navigation.Page1">
  5. <ContentPage.Content>
  6. <StackLayout>
  7. <Image Source="Android.png"/>
  8. </StackLayout>
  9. </ContentPage.Content>
  10. </ContentPage>
Step 8
Open Solution Explorer >> Project Name >> Page2.xaml. Open the design view of this page.
Xamarin
The code is given below.
Xamarin
Xaml Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="Navigation.Page2">
  5. <ContentPage.Content>
  6. <StackLayout>
  7. <Image Source="Windows.png"/>
  8. </StackLayout>
  9. </ContentPage.Content>
  10. </ContentPage>
Step 9
Open Solution Explorer >> Project Name >> Page3.xaml.cs. Open the design view of this page.
Xamarin
The code is given below.
Xamarin
Xaml Code
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="Navigation.Page3">
  5. <ContentPage.Content>
  6. <StackLayout>
  7. <Image Source="Ios.png"/>
  8. </StackLayout>
  9. </ContentPage.Content>
  10. </ContentPage>
Step 10
Open Solution Explorer >> Project Name >> MainPage.xaml.cs. Open the design view of this page.
Xamarin
The code is given below.
Xamarin
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;
  8. namespace Navigation
  9. {
  10. public partial class MainPage : ContentPage
  11. {
  12. public MainPage()
  13. {
  14. InitializeComponent();
  15. }
  17. private async void Button_Clicked(object sender, EventArgs e)
  18. {
  19. await Navigation.PushAsync(new Page1());
  20. }
  22. private async void Button_Clicked_1(object sender, EventArgs e)
  23. {
  24. await Navigation.PushAsync(new Page2());
  25. }
  27. private async void Button_Clicked_2(object sender, EventArgs e)
  28. {
  29. await Navigation.PushAsync(new Page3());
  30. }
  31. }
  32. }
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.