WindowsPhone 8.1 : Gesture Support with GestureRecognizer class(C#-XAML)

Introduction:

Touch gestures are the primary method for a user to interact with a Windows Phone, requiring a user-initiated movement with single or multiple fingers on a touch screen. Developers can implement gesture support in their application. Each framework offers unique ways to handle touch input to create compelling, interactive end user applications. In this article I will focus on GestureRecognizer class.The GestureRecognizer class resides in the Windows.UI.Input namespace and recognizes gestures such as tap, double tap, hold and swiping and others like below...

Please visit this link for glossary of the terms we use.

Note: GestureRecognizer class is available for Windows Phone 8.1 [Windows Phone Silverlight 8.1 and Windows Runtime apps] 

Requirements:

• This sample is targeted for windowsphone store 8.1 OS,So make sure you’ve downloaded and installed the Windows Phone 8.1 SDK. For more information, see Get the SDK.
• I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
• This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

Description:

Let's start by learning about some of the touch gestures supported in WindowsPhone 8.1 that we will cover in this article.
1. Tap – Tap is invoked by tapping once on an item. The tap gesture is generally used to open/select an item being tapped.

2. Hold – Tap and leave your finger there for a moment. It is generally used for Opens a context-specific menu (like right-clicking with a mouse).

3. Swipe – Swiping is similar to sliding, with one difference. In a swipe gesture, you drag a finger in the opposite direction compared to a slide gesture. Swiping is generally used to invoke system/app commands.

First of all, Open Microsoft Visual Studio Express 2013 for Windows and then create new project type Blank App(Ex:GesturesWP8.1)

Step 1:

Open MainPage.xaml page and add TextBlock(TxtGestureNotes) to display the type of gesture we register,

1. <Grid Name="LayoutRoot">  
2.         <TextBlock  TextWrapping="Wrap"  FontSize="35" Name="TxtGestureNotes"/>  
3.     </Grid> 

Step 2:

To work with GestureRecongnizer, you will need to handle the MainPage's PointerMoved, PointerReleased, PointerPressed and PointerCanceled events.So Write following method to register callbacks for gesture events for tapping, right-tapping and cross-sliding.

1. GestureRecognizer gestureRecognizer = new Windows.UI.Input.GestureRecognizer();  
2. Windows.UI.Xaml.UIElement element;  
3.         
4. public void GestureInputProcessor(Windows.UI.Input.GestureRecognizer gr, Windows.UI.Xaml.UIElement target)  
5.         {  
6.             this.gestureRecognizer = gr;  
7.             //Targeted Ui element to be performing gestures on it.  
8.             this.element = target;  
9.   
10.             //Enable gesture settings for Tap,Hold,RightTap,CrossSlide  
11.             this.gestureRecognizer.GestureSettings = Windows.UI.Input.GestureSettings.Tap | Windows.UI.Input.GestureSettings.Hold | Windows.UI.Input.GestureSettings.RightTap | Windows.UI.Input.GestureSettings.CrossSlide;  
12.   
13.             // Set up pointer event handlers. These receive input events that are used by the gesture recognizer.  
14.             this.element.PointerCanceled += OnPointerCanceled;  
15.             this.element.PointerPressed += OnPointerPressed;  
16.             this.element.PointerReleased += OnPointerReleased;  
17.             this.element.PointerMoved += OnPointerMoved;  
18.   
19.             // Set up event handlers to respond to gesture recognizer output  
20.             gestureRecognizer.Holding+=gestureRecognizer_Holding;  
21.             gestureRecognizer.Tapped += gestureRecognizer_Tapped;  
22.             gestureRecognizer.RightTapped += gestureRecognizer_RightTapped;  
23.   
24.             //CrossSliding distance thresholds are disabled by default. Use CrossSlideThresholds to set these values.  
25.             Windows.UI.Input.CrossSlideThresholds cst = new Windows.UI.Input.CrossSlideThresholds();  
26.             cst.SelectionStart = 2;  
27.             cst.SpeedBumpStart = 3;  
28.             cst.SpeedBumpEnd = 4;  
29.             cst.RearrangeStart = 5;  
30.             gestureRecognizer.CrossSlideHorizontally = true;//Enable horinzontal slide  
31.             gestureRecognizer.CrossSlideThresholds = cst;  
32.   
33.             gestureRecognizer.CrossSliding += gestureRecognizer_CrossSliding;  
34.              
35.         }  

This method having following important steps

1.Get the targeted UI element to be performing gestures on it.

2.Enable gesture settings for Tap,Hold,RightTap,CrossSlide events

3.Set up pointer event handlers. These receive input events that are used by the gesture recognizer. 

4.Set up event handlers to respond to gesture recognizer output

Note: CrossSlide must be set in the GestureSettings property to support CrossSliding. CrossSliding distance thresholds are disabled by default. Use CrossSlideThresholds to set these values.Please observe in above method.

Step 3:

Use above method in page load, we will register callbacks for gesture events for tapping, right-tapping, hold and cross-sliding.

1. private void Page_Loaded(object sender, RoutedEventArgs e)  
2.        {  
3.            //For making gestures operations on Grid named as 'LayoutRoot'  
4.            GestureInputProcessor(gestureRecognizer, LayoutRoot);  
5.        }  

To ensure that we clean up, we will unregister above event handlers on the page unload event.

1. private void Page_Unloaded(object sender, RoutedEventArgs e)  
2.         {  
3.             //Remove event handlers of gesture recognizer events  
4.             gestureRecognizer.Tapped -= gestureRecognizer_Tapped;  
5.             gestureRecognizer.RightTapped -= gestureRecognizer_RightTapped;  
6.             gestureRecognizer.CrossSliding -= gestureRecognizer_CrossSliding;  
7.         }  

Step 4:

Pointer Events:

you need to implement the MainPage's PointerMoved, PointerReleased and PointerPressed events to work with GestureRecognizer events.

1. //Pointer Events  
2.         void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)  
3.         {  
4.             // Route teh events to the gesture recognizer  
5.             this.gestureRecognizer.ProcessDownEvent(args.GetCurrentPoint(this.element));  
6.             // Set the pointer capture to the element being interacted with  
7.             this.element.CapturePointer(args.Pointer);  
8.             // Mark the event handled to prevent execution of default handlers  
9.             args.Handled = true;  
10.         }  
11.   
12.         void OnPointerCanceled(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)  
13.         {  
14.             this.gestureRecognizer.CompleteGesture();  
15.             args.Handled = true;  
16.         }  
17.   
18.         void OnPointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)  
19.         {  
20.             this.gestureRecognizer.ProcessUpEvent(args.GetCurrentPoint(this.element));  
21.             args.Handled = true;  
22.         }  
23.   
24.         void OnPointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)  
25.         {  
26.             this.gestureRecognizer.ProcessMoveEvents(args.GetIntermediatePoints(this.element));  
27.         }     

Gesture Events:

Finally, we will implement the event handlers for the gesture events. In these events, we will fill the TextBlock(TxtGestureNotes) with the text about the relevant gesture we received.

1. //Gesture Events  
2.         private void gestureRecognizer_Holding(GestureRecognizer sender, HoldingEventArgs args)  
3.         {  
4.             TxtGestureNotes.Text = "Gesture Holding";  
5.         } 
6.         void gestureRecognizer_RightTapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.RightTappedEventArgs args)  
7.         {  
8.             TxtGestureNotes.Text = "Right Tap gesture recognized";  
9.   
10.         }  
11.         void gestureRecognizer_CrossSliding(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.CrossSlidingEventArgs args)  
12.         {  
13.             TxtGestureNotes.Text = "Slide/swipe gesture recognized on cross horizontal";  
14.         }  
15.         void gestureRecognizer_Tapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.TappedEventArgs args)  
16.         {  
17.             TxtGestureNotes.Text = "Tap gesture recognized";  
18.   
19.         }  

Summary:

In this article, we learned how to programmatically handle gestures in WindowsPhone Store 8.1 applications. 

FeedBack Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 
Have a nice day by Subramanyam Raju :)