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
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