Handling Gestures in Your Windows Store Apps

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

In an earlier article, we learned about support for some of gestures in Windows 8. In this article, we will cover the other gestures supported on Windows 8 and learn how we can programmatically detect them in our Windows Store applications.

In the previous article, we had covered gestures such as tap, slide and swipe. In this article, we will cover the following gestures.

1. Press and Hold – This gesture is invoked by pressing a finger and holding for a few moments. This gesture is used to typically learn more about an item by opening a menu specific to the item on which this gesture was performed. This can also be used to select an item.

2. Pinch n Zoom – This gesture is invoked by using two fingers simultaneously. By bringing the fingers together when pressed on the screen, a pinch gesture is performed, and by moving them away from each other, a zoom gesture is performed. These gestures are typically used to zoom in/out the contents on which this gesture is performed. The keyboard equivalent of this gesture is to use Ctrl + Mouse scroll, or Ctrl + Shift + “+/-“.

3. Rotate – This gesture is invoked by putting two or more fingers on an item and rotating your hand while fingers are still pressed. This gesture is used to rotate items (if it is allowed) displayed to the user.

We can use the GestureRecognizer class in the Windows.UI.Input namespace to recognize the gestures.

To ensure that we can listen to these gestures, we need to specify in the GestureSettings the type of gesture we want to support with the GestureRecognizer instance.

GestureSetting enum

Supported Gesture

Description

None

None

Disabled gesture recognition

Tap

Tap

Enables support for tap

DoubleTap

Double tap

Enables support for double tap

Hold

Press and Hold

Enables support for press and hold gesture

Hold with mouse

Press and Hold (mouse)

Enables support for press and hold gesture using mouse

RightTap

Right Tap

Enables support for right tap

Drag

Swipe/Slide

Enables support for slide and swipe gestures

ManipulationMultipleFingerPanning

Pinch n zoom

Enables support for pinch n zoom gesture

We will now build a simple application that demonstrates gestures such as Press and Hold, Pinch n zoom and rotate.

Hands On

Create a new Windows Store application titled Windows8GestureDemo02.

New Project
New Project

We will now add a textbox to display the type of gesture detected. Let’s name this textBoxGesture.

To use the GestureRecognizer class in our application, we need to include the Windows.UI.Input namespace.

In the code behind for MainPage.xaml, add the following line.

using Windows.UI.Input;

Create a member variable of type GestureRecognizer.

    public sealed partial class MainPage : Page
    {
        GestureRecognizer gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
        public MainPage()

Next, we need to register the event handlers on the GestureRecognizer object. The gestures we are interested in will be detected by using the Holding, ManipulationStarted, ManipulationUpdated, ManipulationInertiaStarting and ManipulationCompleted events.

On the PageLoad events, we will register these event handlers.

private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            gestureRecognizer.Holding += gestureRecognizer_Holding;
            gestureRecognizer.ManipulationCompleted += gestureRecognizer_ManipulationCompleted;
            gestureRecognizer.ManipulationInertiaStarting += gestureRecognizer_ManipulationInertiaStarting;
            gestureRecognizer.ManipulationStarted += gestureRecognizer_ManipulationStarted;
            gestureRecognizer.ManipulationUpdated += gestureRecognizer_ManipulationUpdated;
        }

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

private void Page_Unloaded(object sender, RoutedEventArgs e)
        {
            gestureRecognizer.Holding -= gestureRecognizer_Holding;
            gestureRecognizer.ManipulationCompleted -= gestureRecognizer_ManipulationCompleted;
            gestureRecognizer.ManipulationInertiaStarting -= gestureRecognizer_ManipulationInertiaStarting;
            gestureRecognizer.ManipulationStarted -= gestureRecognizer_ManipulationStarted;
            gestureRecognizer.ManipulationUpdated -= gestureRecognizer_ManipulationUpdated;
        }

In the constructor of the page, we will set the GestureSettings of the GestureRecognizer object to listen to gestures we are interested in.

public MainPage()
        {
            this.InitializeComponent();
            this.gestureRecognizer.GestureSettings = Windows.UI.Input.GestureSettings.Hold | Windows.UI.Input.GestureSettings.HoldWithMouse | Windows.UI.Input.GestureSettings.ManipulationRotate | Windows.UI.Input.GestureSettings.ManipulationRotateInertia | Windows.UI.Input.GestureSettings.ManipulationScale | Windows.UI.Input.GestureSettings.ManipulationScaleInertia;
        }

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

void gestureRecognizer_ManipulationUpdated(GestureRecognizer sender, ManipulationUpdatedEventArgs args)
        {
 
        }
 
        void gestureRecognizer_ManipulationStarted(GestureRecognizer sender, ManipulationStartedEventArgs args)
        {
 
        }
 
        void gestureRecognizer_ManipulationInertiaStarting(GestureRecognizer sender, ManipulationInertiaStartingEventArgs args)
        {
 
 
        }
 
        void gestureRecognizer_ManipulationCompleted(GestureRecognizer sender, ManipulationCompletedEventArgs args)
        {
            ManipulationDelta m = args.Cumulative;
            if (m.Expansion > 0)
            {
                textBoxGesture.Text = "Zoom gesture detected";
            }
            else if (m.Expansion < 0)
            {
                textBoxGesture.Text = "Pinch gesture detected";
            }
 
            if (m.Rotation != 0.0)
            {
                textBoxGesture.Text = "Rotation detected";
            }
 
 
        }
 
        void gestureRecognizer_Holding(GestureRecognizer sender, HoldingEventArgs args)
        {
            string holdingState = "";
            switch (args.HoldingState)
            {
                case HoldingState.Canceled:
                    holdingState = "Cancelled";
                    break;
                case HoldingState.Completed:
                    holdingState = "Completed";
                    break;
                case HoldingState.Started:
                    holdingState = "Started";
                    break;
            }
            textBoxGesture.Text = "Holding state = " + holdingState;
 
        }

Our application is now ready. You can deploy this on Windows 8 install and the debug this to see the gesture recognition in action. If you have trouble following along, you can download the sample code below.

We would need a real device to test this application.

Summary

In this article, we learned about how to programmatically handle gestures such as rotate, ‘pinch and zoom’ and ‘press and hold’ in Windows Store applications. I hope you have found this information useful.

About the Author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read