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


Layout safe areas for iOS in Xamarin Forms

Since the launch of the iPhone X there is a notch at the top of the screen on iOS devices that tend to be annoying to work around. You would have to add some sort of margin to avoid your controls to be overlapped by it. The problem with this

Read More »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos

Image caching in Xamarin Forms

Someone asked me about an issue they were having when showing a ListView that had an image for each cell. When the user would scroll the images would flicker and the UI would turn a bit slow. The images were being loaded from the internet. The problem the person was

Read More »