Xamarin Forms Pass TapGestureRecognizer CommandParameter

TapGestureRecognizer in Xamarin Forms are used to create click events on controls like Labels, Layouts, Frames. While using Tapped gestures we can create each event for each controls, but this will lead to number of different functions in code-behind. But by using CommandParameter, we can parse and recognize controls which is clicked or pass some data directly. Here, we create a simple example for demonstrating the same.

DOWNLOAD SOURCE CODE

Xamarin Forms TapGestureRecognizer CommandParameter Example:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:XamSample"
x:Class="XamSample.MainPage"
Title="Xamarin ListView">

<StackLayout Orientation="Vertical" Padding="5">

<Frame CornerRadius="5" HeightRequest="30" MinimumHeightRequest="30" HorizontalOptions="CenterAndExpand"
Padding="5" BackgroundColor="#166EDC" Margin="5" WidthRequest="100" MinimumWidthRequest="100">

<Label Text="JAVA" TextColor="#fff" FontSize="Medium" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" CommandParameter="Java"/>
</Frame.GestureRecognizers>
</Frame>

<Frame CornerRadius="5" HeightRequest="30" MinimumHeightRequest="30" HorizontalOptions="CenterAndExpand"
Padding="5" BackgroundColor="#5B4DBE" Margin="5" WidthRequest="100" MinimumWidthRequest="100">

<Label Text="Xamarin" TextColor="#fff" FontSize="Medium" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" CommandParameter="Xamarin"/>
</Frame.GestureRecognizers>
</Frame>

<Frame CornerRadius="5" HeightRequest="30" MinimumHeightRequest="30" HorizontalOptions="CenterAndExpand"
Padding="5" BackgroundColor="#21283c" Margin="5" WidthRequest="100" MinimumWidthRequest="100">

<Label Text="Kotlin" TextColor="#fff" FontSize="Medium" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" CommandParameter="Kotlin"/>
</Frame.GestureRecognizers>
</Frame>

</StackLayout>

</ContentPage>

There are three frames used to create the design and Labels showing the names. And on TapGestureRecognizer function we are passing CommandParameter.

Edit the code-behind as below:

MainPage.xaml.cs:

using System;
using Xamarin.Forms;

namespace XamSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}

private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
try
{
Frame frame = (Frame)sender;
TapGestureRecognizer tapGesture = (TapGestureRecognizer)frame.GestureRecognizers[0];
await DisplayAlert("Info", "You selected " + tapGesture.CommandParameter.ToString(), "Ok");
}
catch(Exception ex)
{
await DisplayAlert("Error", ex.Message.ToString(), "Ok");
}
}
}
}

OUTPUT:

You can download the source code for free using the link below:

DOWNLOAD SOURCE CODE

Also see:
ListView hide Scrollbars in Xamarin Forms

Button Press CommandParameter – Xamarin Forms

Xamarin forms SQLite DB – Perform CRUD operation.

Xamarin forms SkiaSharp – Creating different shapes

Creating SQLite Database in Xamarin forms

Xamarin forms Creating Custom Button control