Handling Gestures in Your Windows Store Apps

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.

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.

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

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