GestureRecognizers In Xamarin (Cross Platform) With Image Example

What is GestureRecognizers in Xamarin ?

iOS and Android apps both provide a way to wire up a UI control to listen for the specific touch events. These events are called gestures. Typically, we would use this to listen for a tap (click) gesture.

Step 1

Go to Visual Studio.

Click File -> New -> Project.

Click C# -> Cross Platform -> Cross Platform app (Xamarin.Forms.Portable).

Enter the Application name, followed by clicking OK.

 

Step 2

In this step, go to Solution Explorer -> Portable Class Library, followed by clicking XAML. Insert the code given below XAML page and save it.

 

Step 3

In this step, put an image in Android and iOS folder (shown in the image).

For WinPhone click winphone Project and paste the image.

Step 4

Open App.Xaml.cs and set the page name.

public App()

{

InitializeComponent();

MainPage = new Page1();

}

Step 5

Open Page1.Xaml and add the code in this page.

<?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="ImageExample.Page1"
             Padding=""20,10,0,0>
  <ContentPage.Content>
    <Grid Grid.Row="0" >
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="130"></RowDefinition>
        <RowDefinition Height="100"></RowDefinition>
      </Grid.RowDefinitions>
      <Image  x:Name="imgmain"  Source="Chrysanthemum.jpg" Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="Start"  Margin="20,0,0,0"  />
      <Grid  Grid.Row="1">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="80"/>
          <ColumnDefinition Width="80"/>
          <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Image Source="Desert.jpg" HeightRequest="40" x:Name="img1" Grid.Column="0"   />
        <Image Source="Hydrangeas.jpg" HeightRequest="40" x:Name="img2" Grid.Column="1"   />
        <Image Source="Jellyfish.jpg" HeightRequest="40" x:Name="img3" Grid.Column="2"/>
      </Grid>
    </Grid>
  </ContentPage.Content>
</ContentPage>

Step 6

Open Page1.Xaml.cs and add the code in this page.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace ImageExample
{
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
            img1.GestureRecognizers.Add((new TapGestureRecognizer((view) => OnImageClicked1())));
            img2.GestureRecognizers.Add((new TapGestureRecognizer((view) => OnImageClicked2())));
            img3.GestureRecognizers.Add((new TapGestureRecognizer((view) => OnImageClicked3())));
        }
        public void OnImageClicked3()
        {
            imgmain.Source = img3.Source;
        }

        public void OnImageClicked2()
        {
            imgmain.Source = img2.Source;
        }

        public void OnImageClicked1()
        {
            imgmain.Source = img1.Source;
        }
    }
}

Step 7

Click Build menu and go to Configuration Manager.

Configure your Android and Windows.

, then Click Close.

Step 8

In this step, select Build & Depoly option, followed by clicking to Start your Application.

Now, go to Run option, choose Debug from the list of Android or iOS or UWP Simulators, which are available. You can choose any one Simulator and run it.

Step 9

Output

After few seconds, the app will start running on your Android Simulator. You will see your app is working successfully.

.

Now, click one by one all the images.