Xamarin.Forms Application For GridView Using Image Navigation

Introduction 
 
This article demonstrates GridView using Image Navigation in Xamarin.Forms application. Xamarin is a platform that allows us to create a multi-platform mobile application for platforms, like Android, Windows, and 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 and click "OK" button.
 
 
 
Step 2 
 
Open Solution Explorer >> Project Name (Portable) >> App.xaml.cs. Double Click in open the design view of this page.
 
 
 
The Code is given below.
 
 
 
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 GridViewImage  
  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.
 
 
 
Next, a dialogue box will open. Choose image location and add images.
 
 
 
The Images are added successfully.
 
 
 
Step 4
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double Click in open the design view of this page.
 
 
 
The Code is given below.
 
 
 
Xaml Code
 
We added four images inside the StackLayout. The images are named "Code", "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:GridViewImage"  
  5.              x:Class="GridViewImage.MainPage">  
  6.     <ContentPage.Content>  
  7.         <Grid RowSpacing="5" ColumnSpacing="5" BackgroundColor="Black">  
  8.             <Grid.RowDefinitions>  
  9.                 <RowDefinition Height="*"/>  
  10.                 <RowDefinition Height="*"/>  
  11.             </Grid.RowDefinitions>  
  12.             <Grid.ColumnDefinitions>  
  13.                 <ColumnDefinition Width="*"/>  
  14.                 <ColumnDefinition Width="*"/>  
  15.             </Grid.ColumnDefinitions>  
  16.             <Image Source="Code.png"  
  17.                    Grid.Row="0"  
  18.                    Grid.Column="0"  
  19.                    BackgroundColor="White"  
  20.                    HorizontalOptions="FillAndExpand"  
  21.                    VerticalOptions="FillAndExpand">  
  22.             <Image.GestureRecognizers>  
  23.                     <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>  
  24.                 </Image.GestureRecognizers>    
  25.             </Image>  
  26.            <Image Source="Android.png"  
  27.                   Grid.Row="0"  
  28.                   Grid.Column="1"  
  29.                   BackgroundColor="White"  
  30.                   HorizontalOptions="FillAndExpand"  
  31.                   VerticalOptions="FillAndExpand">  
  32.                 <Image.GestureRecognizers>  
  33.                     <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1"/>  
  34.                 </Image.GestureRecognizers>  
  35.             </Image>  
  36.             <Image Source="Windows.png"  
  37.                    Grid.Row="1"  
  38.                    Grid.Column="0"  
  39.                    BackgroundColor="White"  
  40.                    HorizontalOptions="FillAndExpand"  
  41.                    VerticalOptions="FillAndExpand">  
  42.                 <Image.GestureRecognizers>  
  43.                     <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_2"/>  
  44.                 </Image.GestureRecognizers>  
  45.             </Image>  
  46.             <Image Source="IOS.png"  
  47.                    Grid.Row="1"  
  48.                    Grid.Column="1"  
  49.                    BackgroundColor="White"  
  50.                    HorizontalOptions="FillAndExpand"  
  51.                    VerticalOptions="FillAndExpand">  
  52.                 <Image.GestureRecognizers>  
  53.                     <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_3"/>  
  54.                 </Image.GestureRecognizers>  
  55.             </Image>  
  56.   
  57.         </Grid>  
  58.     </ContentPage.Content>  
  59. </ContentPage>   
Step 5
 
Next, Open the 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 and give your name "Page 1".
 
 
 
Similarly, add the XAML page and give your name "Page 2".
 
 

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

Similarly, add the XAML page and give your name "Page 4".
 
 
Step 6
  
Open Solution Explorer >> Project Name >> Page1.xaml. Open the design view of this page. 
 
 
 
The code is given below.
 
 
 
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="GridViewImage.Page1">  
  5.     <ContentPage.Content>  
  6.         <StackLayout>  
  7.             <Label Text="C#"  
  8.                 VerticalOptions="CenterAndExpand"   
  9.                 HorizontalOptions="CenterAndExpand" />  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>   
Step 7
 
Open Solution Explorer >> Project Name >> Page2.xaml. Open the design view of this page.
 
 
 
The code is given below.
 
 
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="GridViewImage.Page2">  
  5.     <ContentPage.Content>  
  6.         <StackLayout>  
  7.             <Label Text="Android"  
  8.                 VerticalOptions="CenterAndExpand"   
  9.                 HorizontalOptions="CenterAndExpand" />  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>              
Step 8

Open Solution Explorer >> Project Name >> Page3.xaml. Open the design view of this page.
 
 
 
The code is given below.
 
 
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="GridViewImage.Page3">  
  5.     <ContentPage.Content>  
  6.         <StackLayout>  
  7.             <Label Text="Windows"  
  8.                 VerticalOptions="CenterAndExpand"   
  9.                 HorizontalOptions="CenterAndExpand" />  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>  
Step 9
 
Open Solution Explorer >> Project Name >> Page4.xaml. Open the design view of this page.
 
 
The code is given below.
 
 
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="GridViewImage.Page4">  
  5.     <ContentPage.Content>  
  6.         <StackLayout>  
  7.             <Label Text="IOS"  
  8.                 VerticalOptions="CenterAndExpand"   
  9.                 HorizontalOptions="CenterAndExpand" />  
  10.         </StackLayout>  
  11.     </ContentPage.Content>  
  12. </ContentPage>  
Step 10
 
Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs. Double Click in open the design view of this page. 
 
 
The Code is given below.
 
 
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 GridViewImage  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
  18.         {  
  19.             await Navigation.PushAsync(new Page1());  
  20.         }  
  21.   
  22.         private async void TapGestureRecognizer_Tapped_1(object sender, EventArgs e)  
  23.         {  
  24.             await Navigation.PushAsync(new Page2());  
  25.         }  
  26.   
  27.         private async void TapGestureRecognizer_Tapped_2(object sender, EventArgs e)  
  28.         {  
  29.             await Navigation.PushAsync(new Page3());  
  30.         }  
  31.   
  32.         private async void TapGestureRecognizer_Tapped_3(object sender, EventArgs e)  
  33.         {  
  34.             await Navigation.PushAsync(new Page4());  
  35.         }  
  36.     }  
  37. }   
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.
 
The result is displayed.
 
 
 
Finally, we have successfully created Xamarin.Forms Grid View Using Image Navigation. 
 
Conclusion 
 
I hope you learned how to create a Xamarin.Forms Application For Grid View Using Image Navigation with Visual Studio 15.4.4.


Similar Articles