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).
 
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;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace Navigation  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage(new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  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>  
  11.      
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>  
  11.       
  12.     
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;  
  7.   
  8. namespace Navigation  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private async void Button_Clicked(object sender, EventArgs e)  
  18.         {  
  19.             await Navigation.PushAsync(new Page1());  
  20.         }  
  21.   
  22.         private async void Button_Clicked_1(object sender, EventArgs e)  
  23.         {  
  24.             await Navigation.PushAsync(new Page2());  
  25.         }  
  26.   
  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. 


Similar Articles