This post is Day #30 in a series called the 31 Days of Windows Phone.  It’s hard to believe that we’ve made it this far, but tomorrow is the last article in this entire series.

Yesterday, I wrote about the Advertising SDK, and how you can simply add advertisements to your applications to generate extra revenue.  Today, we’re going to focus on Gestures, and how we can use an XNA assembly in our Silverlight applications to simply recognize our user’s touch input.

What is XNA?

This entire series has focused on Silverlight, but there’s a sister technology called XNA that is also available for writing applications for Windows Phone 7.  You’ll generally find game developers using this technology, as it has been the platform for the Zune and the Xbox 360 for several years.  If you want to learn more about XNA, check out this great list of tutorials: http://create.msdn.com/en-us/education/roadmap

Getting the XNA assembly in our project

The first thing we need to do is get the Microsoft.Xna.Framework.Input.Touch assembly reference in our project.  Right click on your project name, and choose this assembly from the list.

Accessing the TouchPanel

Part of the XNA world revolves around the idea of a TouchPanel, or the entire surface of the screen.  By accessing this TouchPanel, we can tie directly into its Gesture library, and even enable only the specific gestures we’re interested in.

To do this, we just need to add a USING statement at the top of our code-behind.

using Microsoft.Xna.Framework.Input.Touch;

Once this is added to our page, we can enable the specific gestures we want to capture:

TouchPanel.EnabledGestures = GestureType.Hold | GestureType.Tap | GestureType.DoubleTap | GestureType.Flick | GestureType.Pinch;

I would generally do this directly in the startup method for my application, but this can be done in code at any time.  The next step is where we diverge from XNA.  In an XNA application, you have a standard game loop that executes 30 times every second.  There are two methods that recursively call each other, Draw() and Update().  These two methods ping-pong between each other, constantly updating the data, and then rendering it on the screen.

In Silverlight, we don’t have this.  Silverlight is event driven, and until an event fires, there’s not a very efficient mechanism for us to be checking for gestures.  Enter Manipulation events.

Leveraging Manipulation Events with Gestures

If we wanted to do a ton of math, or create our own Silverlight gestures, the Manipulation events are exactly where we’d want to start.  But for standard gestures, like Pinch, Flick, Tap, DoubleTap, Hold, etc., there’s not a single reason for us to write the math (or code) to figure those out.

So, we’ve accessed the TouchPanel, and enabled the gestures we care about…now it’s time to start recognizing them. There is a ManipulationCompleted event that we can attach to any control, but for my purposes, I’m going to apply to my LayoutRoot control, so that no matter where the gesture takes place, I can capture it.

LayoutRoot.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(LayoutRoot_ManipulationCompleted);

In the event handler that follows, I can just check the TouchPanel to see IF a gesture has happened, and use a switch statement to handle each case when one does.

void LayoutRoot_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
	while (TouchPanel.IsGestureAvailable)
	{
		GestureSample gesture = TouchPanel.ReadGesture();

		switch (gesture.GestureType)
		{
			case GestureType.Tap:
				GestureText.Text = "Tap";
				break;
			case GestureType.DoubleTap:
				GestureText.Text = "Double Tap";
				break;
			case GestureType.Hold:
				GestureText.Text = "Hold";
				break;
			case GestureType.Flick:
				GestureText.Text = "Flick";
				break;
			case GestureType.Pinch:
				GestureText.Text = "Pinch";
				break;
		}
	}
}

This trivial amount of code is all we need to enable gestures in our applications.  Of course, you might want to do something more significant than writing text to a TextBlock, but that’s for you to decide.  Now you know how to capture these events in a simple, straightforward manner.

Download the Code

This example uses the code shown above to write the name of the gesture recognized to a textbox on the page.  Feel free to use it as the basis for your next application, however.  In addition, don’t forget about the GestureListener available in the Silverlight Toolkit for Windows Phone.  I covered this control on Day #21.