Windows Phone 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 and interactive end user applications. In this article I will focus on the 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 as in the following.



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

Note: The GestureRecognizer class is available for Windows Phone 8.1 (Windows Phone Silverlight 8.1 and Windows Runtime apps).

Requirements:

• This sample is targeted for the Windows Phone 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 assume you're going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you need to take some additional steps. For more info, see Register your Windows Phone device for development.
  
  
• This article 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 Windows Phone 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 to open 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 a new project of type Blank App (for example GesturesWP8.1).



Step 1

Open the MainPage.xaml page and add a TextBlock (TxtGestureNotes) to display the type of gesture we register as in the following:

<Grid Name="LayoutRoot">
    <TextBlock TextWrapping="Wrap" FontSize="35" Name="TxtGestureNotes"/>
</Grid>

Step 2

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

GestureRecognizer gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
Windows.UI.Xaml.UIElement element;

public void GestureInputProcessor(Windows.UI.Input.GestureRecognizer gr, Windows.UI.Xaml.UIElement target)
{
    this.gestureRecognizer = gr;
    //Targeted Ui element to be performing gestures on it.
    this.element = target;

    //Enable gesture settings for Tap,Hold,RightTap,CrossSlide
    this.gestureRecognizer.GestureSettings = Windows.UI.Input.GestureSettings.Tap | Windows.UI.Input.GestureSettings.Hold | Windows.UI.Input.GestureSettings.RightTap | Windows.UI.Input.GestureSettings.CrossSlide;

    // Set up pointer event handlers. These receive input events that are used by the gesture recognizer.
    this.element.PointerCanceled += OnPointerCanceled;
    this.element.PointerPressed += OnPointerPressed;
    this.element.PointerReleased += OnPointerReleased;
    this.element.PointerMoved += OnPointerMoved;

    // Set up event handlers to respond to gesture recognizer output
    gestureRecognizer.Holding+=gestureRecognizer_Holding;
    gestureRecognizer.Tapped += gestureRecognizer_Tapped;
    gestureRecognizer.RightTapped += gestureRecognizer_RightTapped;

    //CrossSliding distance thresholds are disabled by default. Use CrossSlideThresholds to set these values.
    Windows.UI.Input.CrossSlideThresholds cst = new Windows.UI.Input.CrossSlideThresholds();
    cst.SelectionStart = 2;
    cst.SpeedBumpStart = 3;
    cst.SpeedBumpEnd = 4;
    cst.RearrangeStart = 5;
    gestureRecognizer.CrossSlideHorizontally = true;//Enable horinzontal slide
    gestureRecognizer.CrossSlideThresholds = cst;

    gestureRecognizer.CrossSliding += gestureRecognizer_CrossSliding;

}

This method has the following important steps:

 

1. Get the targeted UI element to be performing gestures on it.
   
   
2. Enable gesture settings for Tap, Hold, RightTap and 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 that in the preceding method.

Step 3

Using the preceding method in page load, we will register callbacks for gesture events for tapping, right-tapping, holding and cross-sliding.

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

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

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

Step 4

Pointer Events

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

//Pointer Events
void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)
{
    // Route teh events to the gesture recognizer
    this.gestureRecognizer.ProcessDownEvent(args.GetCurrentPoint(this.element));
    // Set the pointer capture to the element being interacted with
    this.element.CapturePointer(args.Pointer);
    // Mark the event handled to prevent execution of default handlers
    args.Handled = true;
}

void OnPointerCanceled(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)
{
    this.gestureRecognizer.CompleteGesture();
    args.Handled = true;
}

void OnPointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)
{
    this.gestureRecognizer.ProcessUpEvent(args.GetCurrentPoint(this.element));
    args.Handled = true;
}

void OnPointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)
{
    this.gestureRecognizer.ProcessMoveEvents(args.GetIntermediatePoints(this.element));
}

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.

//Gesture Events
private void gestureRecognizer_Holding(GestureRecognizer sender, HoldingEventArgs args)
{
    TxtGestureNotes.Text = "Gesture Holding";
}
void gestureRecognizer_RightTapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.RightTappedEventArgs args)
{
    TxtGestureNotes.Text = "Right Tap gesture recognized";

}
void gestureRecognizer_CrossSliding(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.CrossSlidingEventArgs args)
{
    TxtGestureNotes.Text = "Slide/swipe gesture recognized on cross horizontal";
}
void gestureRecognizer_Tapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.TappedEventArgs args)
{
    TxtGestureNotes.Text = "Tap gesture recognized";

}

Summary

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

This article is also available at my original blog.