Xamarin Forms: How to add single and double tap for an image?

Question

I am trying to implement a keypad UI. In the keypad, the +(plus) and 0(zero) options are placed on a single image icon. So I need to show 0 on UI for single tap and for double tap I need to show the + on UI.

My Code

private void ZeroTapped(object sender, EventArgs e)  
{  
	phonenumber_label.Text = "0";  
}  
  
<Image   
	Grid.Column="1"  
	Source="ic_zero_xx.png"  
	Style="{StaticResource KeypadImageStyle}">  
	<Image.GestureRecognizers>  
		<TapGestureRecognizer  
			Tapped="ZeroTapped"  
			NumberOfTapsRequired="1">  
		</TapGestureRecognizer>  
	</Image.GestureRecognizers>  
</Image>  

How I can mention 2 different taps at the same time on an image?

Answer 1

We can add two TapGestureRecognizer on that image, one for single tap and the other for double tap.

private void TapGestureRecognizer_Single(object sender, EventArgs e)
{
  label.Text = "0";
}

private void TapGestureRecognizer_Double(object sender, EventArgs e)
{
  label.Text = "+";
}

<Image >
     <Image.GestureRecognizers>
         <TapGestureRecognizer Tapped="TapGestureRecognizer_Single" NumberOfTapsRequired="1"/>
         <TapGestureRecognizer Tapped="TapGestureRecognizer_Double" NumberOfTapsRequired="2"/>
     </Image.GestureRecognizers>
</Image>

Answer 2

Hello,

Welcome to our Microsoft Q&A platform!

You can use TimeSpan to achieve this.
You can refer to the following the code:

MainPage.xaml

<StackLayout>  
    <Label  Text="" x:Name="phonenumber_label"/>  
  
    <Image   
       Grid.Column="1"  
       Source="test.png">  
        <Image.GestureRecognizers>  
            <TapGestureRecognizer  
              Tapped="ZeroTapped"  
              >  
            </TapGestureRecognizer>  
        </Image.GestureRecognizers>  
    </Image>  
</StackLayout>  

MainPage.xaml.cs

public partial class MainPage : ContentPage  
{  

    int TouchCount;  

    public MainPage()  
    {  
        InitializeComponent();  

    }  

    private void ZeroTapped(object sender, EventArgs e)  
    {  
        if (TouchCount < 1)  
        {  
            TimeSpan tt = new TimeSpan(0, 0, 1);  
            Device.StartTimer(tt, TestHandleFunc);  
        }  
        TouchCount++;  
    }  

    bool TestHandleFunc()  
    {  
        if (TouchCount > 1)  
        {  
            //Your action for Double Click here  
            DisplayAlert("", "Two Clicks", "OK");  
        }  
        else  
        {  
            //Your action for Single Click here  
            DisplayAlert("", "One Click", "OK");  
        }  
        TouchCount = 0;  
        return false;  
    }  
}  

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.