Xamarin.Forms Make an Image tappable by adding a TapGestureRecognizer


Example

There are a couple of default recognizers available in Xamarin.Forms, one of them is the TapGestureRecognizer.

You can add them to virtually any visual element. Have a look at a simple implementation which binds to an Image. Here is how to do it in code.

var tappedCommand = new Command(() =>
{
    //handle the tap
});

var tapGestureRecognizer = new TapGestureRecognizer { Command = tappedCommand };
image.GestureRecognizers.Add(tapGestureRecognizer);

Or in XAML:

<Image Source="tapped.jpg">
    <Image.GestureRecognizers>
        <TapGestureRecognizer
                Command="{Binding TappedCommand}"
                NumberOfTapsRequired="2" />
  </Image.GestureRecognizers>
</Image>

Here the command is set by using data binding. As you can see you can also set the NumberOfTapsRequired to enable it for more taps before it takes action. The default value is 1 tap.

Other gestures are Pinch and Pan.