Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 05:49, 2 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Capturing Gestures with TouchPanel in Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to capture gesture events.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon XNA.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 8.0, Windows Phone SDK 7.1
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Keywords: Gestures/TouchPanel/GestureType
Created: somnathbanik (10 Oct 2011)
Last edited: hamishwillee (02 Jul 2013)


This article shows how to capture a gesture in our Silverlight application using the XNA assembly Microsoft.Xna.Framework.Input.Touch.

The example app first declares what type of gesture we want to capture (just simple user touch input), and once we capture that particular gesture we perform some task. This task could be anything - in this case we just display what type of gesture we have captured.

Capturing Gestures


First create a project with Windows Phone Application Template. Once the project is being created we add Microsoft.Xna.Framework.Input.Touch assembly reference in our project.

In XNA the touch surface is involved with the TouchPanel. With the help of this TouchPanel we can access the Gesture API and can enable the type of gesture we are interested in. In constructor we enable the type of gesture we want in this application.

TouchPanel.EnabledGestures = GestureType.Hold | GestureType.Tap | GestureType.DoubleTap |
GestureType.Flick | GestureType.Pinch|GestureType.DragComplete|GestureType.FreeDrag|

EnabledGestures gets or sets the gestures that are enabled for the touch panel with a single or a combination of gestures that are listed in the GestureType enumeration. It needs the Namespace: Microsoft.Xna.Framework.Input.Touch. Till now we have enabled the gesture that we are looking for, now we need to recognize them. As in this example we are planing to capture the gesture that happens anywhere in the screen, so we call ManipulationCompleted event with LayoutRoot control to occupy the complete screen.

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

In the event handler LayoutRoot_ManipulationCompleted() we first check is gesture available or not .

while (TouchPanel.IsGestureAvailable)

Then we read gesture on the touch panel and compare it in a switch() statement. Once the gesture matches we display the name of the gesture in the screen.

void LayoutRoot_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
while (TouchPanel.IsGestureAvailable)
GestureSample gesture = TouchPanel.ReadGesture();
switch (gesture.GestureType)
case GestureType.FreeDrag:
gestureText.Text = "FreeDrag";
case GestureType.HorizontalDrag:
gestureText.Text = "HorizontalDrag";
case GestureType.Pinch:
gestureText.Text = "Pinch";
case GestureType.VerticalDrag:
gestureText.Text = "VerticalDrag";
case GestureType.Tap:
gestureText.Text = "Tap";
case GestureType.DoubleTap:
gestureText.Text = "Double Tap";
case GestureType.Hold:
gestureText.Text = "Hold";
case GestureType.Flick:
gestureText.Text = "Flick";

Here GestureSample is the data that we get from a multitouch gesture after a time period.

Note.pngNote: The Pinch gesture could not be tested in emulator.

Source Code

The full source code of the example is available here:

This page was last modified on 2 July 2013, at 05:49.
165 page views in the last 30 days.