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.
- Tap: Tap is invoked by tapping once on an item. The tap gesture is generally used to open/select an item being tapped.
- 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).
- 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;
-
- this.element = target;
-
-
- this.gestureRecognizer.GestureSettings = Windows.UI.Input.GestureSettings.Tap | Windows.UI.Input.GestureSettings.Hold | Windows.UI.Input.GestureSettings.RightTap | Windows.UI.Input.GestureSettings.CrossSlide;
-
-
- this.element.PointerCanceled += OnPointerCanceled;
- this.element.PointerPressed += OnPointerPressed;
- this.element.PointerReleased += OnPointerReleased;
- this.element.PointerMoved += OnPointerMoved;
-
-
- gestureRecognizer.Holding+=gestureRecognizer_Holding;
- gestureRecognizer.Tapped += gestureRecognizer_Tapped;
- gestureRecognizer.RightTapped += gestureRecognizer_RightTapped;
-
-
- 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;
- gestureRecognizer.CrossSlideThresholds = cst;
-
- gestureRecognizer.CrossSliding += gestureRecognizer_CrossSliding;
-
- }
This method has the following important steps:
- Get the targeted UI element to be performing gestures on it.
- Enable gesture settings for Tap, Hold, RightTap and CrossSlide events.
- Set up pointer event handlers. These receive input events that are used by the gesture recognizer.
- 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)
- {
-
- 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)
- {
-
- 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.
-
- void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs args)
- {
-
- this.gestureRecognizer.ProcessDownEvent(args.GetCurrentPoint(this.element));
-
- this.element.CapturePointer(args.Pointer);
-
- 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.
-
- 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.