Windows Phone Essentials #8 – Gestures

September 10, 2012

wp-essentials-08-gestures

I’ve been doing Windows Phone development on and off for the past couple of years. In fact, I recently published the first version of my application “Snap Receipt” to the Windows Phone Marketplace. It’s an easy way to get receipts from your phone into Concur’s expense reporting system. You can check it out here. During my experiences with Windows Phone development I’ve identified 10 essential things developers need to know if they’re going to starting writing code against the platform. I thought I’d take some time to share them with you over a series of posts. Please note, these posts refer to Windows Phone 7.0/7.1. I have yet to see any developer bits for Windows Phone 8, but it is my hope that many of the principles I discuss in this series apply to the new platform as well.

In my last post in this series I discussed working with the accelerometer. In this post I’ll look at gestures.

What are gestures? Well, gestures are the means by which a user interacts with a windows phone, and consequently, your applications. Users can use one or multiple fingers to perform actions like scrolling, flicking, pinching to zoom in and out, etc.

Working with Gestures in Silverlight

When it comes to working with gestures on Windows phone, you have two frameworks at your disposal. The first is Silverlight. Silverlight enables your apps to process touch inputs, or gestures, by using the eventing system. Specifically events related to manipulation. By handling these events, you can move and scale elements in your user interface in response to touch events.

When working with gestures in Silverlight on Windows Phone, there are several key classes and events you’ll need to know about.

gestures-00

The ManipulationDelta class gives you access to transformation data that is part of a manipulation. For example, you can get data about the linear motion of the manipulation via the translation property.

The ManipulationVelocities class gives you information regarding how fast a manipulation has occurred. Whereas the ManipulationDelta class can tell you about the linear motion of a manipulation, the ManipulationVelocities class will tell you about the speed of that motion.

When working with gestures, you’ll also need to be aware three events that can be fired from any object that inherits from the UIElement class. In the case of Windows Phone these objects would be the pages and controls that compose your application.

  • The ManipulationStarted event is fired when, as you would expect, a manipulation is invoked by the user.
  • The ManipulationDelta event is fired any time during the manipulation when something has changed (i.e. an object is being dragged across the screen).
  • The ManipulationCompleted event is fired, when, once again as you would expect, the manipulation is done.

Working with Gestures in XNA

The second framework you can use for working with gestures is XNA. XNA differs from Silverlight in that it is truly more of a gesture system as opposed to an event based processing model. The result is comprehensive framework that can make it easy to work with gestures as opposed to trying to deal with gestures in an event based model.

To be clear, you can use XNA touch support in your Silverlight apps and vice-versa. For the sake of this module we will look at how to use both of these frameworks in the context of Silverlight applications.

In order to effectively work with the gesture framework provided by XNA, there are number of items in the Micorosft.Xna.Framwork.Input.Touch namespace you need to become familiar with.

gestures-01

The first is the TouchPanel class. This class enables your applications to get data from the physical touch panel that is part of the device. Of particular interest to us is the ReadGesture method as this is how can determine what type of gesture the user has made.

Next up we have the TouchPanelCapabilities structure. This class lets us know if the physical touch panel on the device is actually connected, as well as the maximum number of touch points exposed by the panel.

The TouchLocation structure gives our applications information about a specific touch location. For example, the state property exposes when a location is pressed or released.

When dealing with multi-touch gestures, the GestureSample structure is important to understand as it gives us access to data from multi-touch gestures that occur over a span of time.

Finally, and in my opinion most useful from a Silverlight perspective, is the GestureType enumeration. This enumeration which is exposed as the GestureType property on the GestureSample structure, tells us what type of gesture a user has made. We can know if a user has tapped or double-tapped the screen, dragged their finger across the screen horizontally or vertically, pinched the screen to zoom-in or out, etc.

Next up in this series, working with push notifications.

Previous posts in this series