Extending Controls with Gesture Recognizers (part 1)

Screen Shot 2019-02-16 at 6.34.13 PM
Share on facebook
Share on twitter
Share on linkedin

On this multipart series of posts we are going to review how to extend controls using Gesture Recognizers. This post is going to focus on the Tap Gesture Recognizer and by the end we will be able to turn a static image into a “clickable” image button.

Let’s get started by giving you some general information…

What is a Gesture Recognizer?

Xamarin.Forms allows us to extend the way we interact with some visual elements by way of Gesture Recognizers.

A Gesture Recognizer is an object that listens for some specific external estimule (the gesture) and launches an action in response (the command or event handler we specify).

A Gesture is any physical action taken by the user on the device. That goes from tapping on the surface of the screen to shaking the device. For the purposes of this series and in terms of Xamarin a gesture can be one of the following: Tap, Pinch, Pan and Swipe.

  • A Tap happens when the user touches the control or the screen on a single point. From now on I will use the terms tap and click interchangeably.
  • A Pinch happens when the user puts two fingers on the control or screen and either moves them towards one and other or against each other. Normally used for dynamic zooming.
  • A Pan is when the user moves one finger across the screen.
  • A Swipe is when the user moves their finger across the control on a straight line, horizontally, vertically or diagonally

Most if not all of Xamarin Forms controls have a property called GestureRecognizers that defines a collection of objects. We can define multiple Gesture Recognizers on the same control and we can also have multiple instances of the same Gesture Recognizer.

So, about that clickable Image…

In order to make an image clickable we have to add a TapGestureRecognizer to it and define the code we will want to execute when clicking it. Here is an example in XAML:

Here is the code we will execute when we tap the Image:

And here is the final result:

Explaining the code

We are using the NumberOfTapsRequired property to define how many times the user has to tap the control before the Gesture Recognizer launches the event. The Tapped property is used to specify the event handler that will take the task of responding to the gesture. In this case the OnTapGestureRecognizerTapped method.

We can also specify a Command instead of an event handler but that’s for another time.

Final thoughts

Here are a few funny things you can try and experiment with:

  • You can add multiple TapGestureRecognizers to the same control, say one for double tap and another one for single tap:
Two different events launch at different tap numbers

In my experience, adding multiple TapGestureRecognizers to the same control can produce some unexpected and even unpleasant behaviors like having the wrong event handler to launch.

  • You can add multiple events for the same number of taps
A single tap launches two different events

I hope you have found this helpful or at the very least interesting. Stay tuned for the next entry in the series and have a good day.

Did you like the post and Wanna leave a reply? You can mention me on twitter @eatskolnikov so we can have a conversation about it

Share it with your friends

Share on facebook
Share on twitter
Share on linkedin

Want to get these post in your inbox?

Type your email down here and you will get a weekly digest of the post here

Other articles on the site

Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
codecampsdq

The CodecampSDQ experience

Last Saturday, June 1st I had the privilege of participating as both staff and speaker for a little-known tech event called CodecampSDQ. It was held in the premises of INTEC University here in Santo Domingo. This event has been going on for many years and it has become a sort

Read More »