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.

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



Related Articles

Downloads

Comments

  • Not working

    Posted by Saurav Kumar on 08/07/2015 02:25am

    Hi Vipul, How do I test this on a Simulator, also there is no pageLoaded event on it. Even after adding it to the page, the debugger isn't being hit. Any help please. Thanks in advance

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • U.S. companies are desperately trying to recruit and hire skilled software engineers and developers, but there is simply not enough quality talent to go around. Tiempo Development is a nearshore software development company. Our headquarters are in AZ, but we are a pioneer and leader in outsourcing to Mexico, based on our three software development centers there. We have a proven process and we are experts at providing our customers with powerful solutions. We transform ideas into reality.

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date