Gesture Recognizers in Xamarin Forms - Tappable Label

Quite often you may want a XAML label to respond to touch gestures. It may be the case that your label must behave as a hyperlink to a website, or perhaps your terms of service and privacy policy (which is a typical scenario in which we add hyperlinks).

By default, XAML labels do not have any events that we could use in this scenario, so your first option may be to create a button and try to make it look like a simple Label (on iOS this is easier than on Android, where buttons always have a background and very distinctive edges).

Enter gesture recognizers. Gesture recognizers allow us to insert events (or Commands for that matter) into an otherwise un-interactive element. Taps are not the only type of gestures that we could handle, but we will cover the more common of them all in this post, by adding tap recognition to one Label.

Adding the Gesture Recognizer

To any element that may require it, you could add a Gesture Recognizer either from XAML or C#. Remember that in this scenario we are implementing a tap gesture recognizer, but recognizers for pinch, pan and swipe gestures are also available.

Let's add a tap recognizer to a label then. In the XAML definition for that element, add the recognizer like this:

<Label x:Name="venueLabel"
       Margin="0,30,0,0"
       FontAttributes="Bold"
       FontSize="22"
       Text="Some fancy coworking">
    <Label.GestureRecognizers>
        <TapGestureRecognizer />
    </Label.GestureRecognizers>
</Label>

By this syntax, you may have inferred that we could add more than one gesture recognizer to a single item. And indeed, as its name suggests, the GestureRecognizers property for the Label is a List, which means it could contain more than one recognizer.

Handling the Tapped Event

The important part here though is that that recognizer contains a Tapped event, that will fire every time the user taps the label in play. You would create an event handler for this event in the same way that you create any event handlers from XAML. I ended up with one that will display an alert, but you can do whatever you need here, such as navigating to your privacy policy page:

void Handle_Tapped(object sender, System.EventArgs e)
{
    DisplayAlert("Awesome", "Gesture recognizers in play!", "Great!");
}

Of course, your TapGestureRecognizer should now look like this:

<TapGestureRecognizer Tapped="Handle_Tapped"/>

An even more tailored experience

There is an additional feature that is quite cool with this TapGestureRecognizer, and that is the ability to require a certain amount of taps for the event to be fired. Try setting the NumberOfTapsRequired property of the recognizer to 2:

<TapGestureRecognizer Tapped="Handle_Tapped"
                      NumberOfTapsRequired="2"/>

Now, your users would need to double tap on the label to get the event to fire. Isn't it awesome?!

Quite in the same way that we have implemented this recognizer, remember that you could also enforce recognizers for swipes, pans, and pinches, so now that you know how to use them, go nuts and improve the user experience inside your apps! Don't over do it though!