question

SreejithSree-2948 avatar image
0 Votes"
SreejithSree-2948 asked SreejithSree-2948 answered

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

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>

100464-component-218-9.png

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


dotnet-xamarin
component-218-9.png (11.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SreejithSree-2948 avatar image
0 Votes"
SreejithSree-2948 answered

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>
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered

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.



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.