Tap Gesture In Xamarin.Forms Application For Android And UWP

Gesture Recognizers can be used to detect user interaction with many elements of a Xamarin.Forms Application. The Tap Gesture is used for tap detection and is implemented with the TapGestureRecognizer class.

After reading this article, you will learn how to add Tap Gesture in Xamarin Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development, using Visual Studio 2017RC.

The important tools which are required to develop UWP are given below.

1. Windows 10 (Recommended).
2. Visual Studio 2017 RC Community/Enterprise/Professional Edition (It is a Free trial software available online).
3. Using Visual studio 2017 Installer, enable the feature of Mobile development with .NET.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2017 RC -> Start -> New Project-> Select Cross-Platform (under Visual C#->Cross Platform App-> Give the suitable name for your app (XamFormGesTap) ->OK.

Step 2

Select the Cross Platform template as Blank app ->Set UI Technology as Forms and sharing as PCL. Afterwards, Visual Studio creates 4 projects (Portable, Droid, iOS, UWP) and displays Getting Started.XamarinPage.



Step 3

Add XAML page for demo. Right click XamFormGesTap(Portable) project and select ADD-> NewItem.

Select ->CrossPlatform-> FormXamlPage-> Give the relevant name (GesTapTest.Xaml).

 

Add 2 images to XamFormGesTap_Droid project Resourses-> Drawable Folder and XamFormGesTap_UWP project

In GesTapTest.Xaml, add Label and Image Control with Tap Gesture code.

 

<StackLayout>
    <Label Text="Xamarin Forms- Tap Gesture in Android and UWP" VerticalOptions="Center" HorizontalOptions="Center" FontSize="Large" />
    <Image Source="Flow1.jpg" VerticalOptions="Center" HorizontalOptions="Center">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped" NumberOfTapsRequired="2" /> </Image.GestureRecognizers>
    </Image>
</StackLayout>

 

 

Add the code given below to GesTapTest.Xaml.cs for OnTapGestureRecognizerTapped.

 

int tapCount = 0;
void OnTapGestureRecognizerTapped(object sender, EventArgs args) {
    tapCount++;
    var imageSender = (Image) sender;
    if (tapCount % 2 == 0) {
        imageSender.Source = "Flow1.jpg";
    } else {
        imageSender.Source = "Flow2.jpg";
    }
}

 

Step 4

Open (double click) the file App.cs in the Solution Explorer-> XamFormGesTap(portable) and set the Root page.

 

Step 5

Change the Configuration Manager settings. Go to Build -> Configuration Manager.

Uncheck the build and deploy options to iOS. Check Droid and UWP.

Step 6

Deploy your app Android Emulator and Local Machine (UWP). The output of XamFormGesTap app is given below.

 

After double tapping the image, the screenshot is given below.



Summary

Now, you have successfully tested Tap Gesture in Xamarin. Forms Application for Cross Platform Application Development, using Visual C# and Xamarin in Visual Studio 2017RC.