WP7 Gesture Recognition

Writing Windows Application or Silverlight Application may not find the importance of gesture, however, it is important in Windows Phone since we dont have a pointer device.

Silverlight Team from Microsoft release the silverlight for Windows Phone Toolkit, which is available at here.

Download and install it. Here starts the tutorial.

After created a new Windows Phone Project and make sure you have install the Toolkit for Windows Phone, right click on the project in Solution Explorer. Then, press Add Reference.

Choose Microsoft.Phone.Controls.Toolkit from the .NET Tab. Here inclues

New Components

• AutoCompleteBox
• ListPicker
• LongListSelector
• Page Transitions

Existing Components

• GestureService/GestureListener
• ContextMenu
• DatePicker
• TimePicker
• ToggleSwitch
• WrapPanel

We will focus on Gesture one.

First add the namespace on XAML.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Then add the following Lines to the object you want to have the gesture on, here I put inside the LayoutRoot

<Grid x:Name="LayoutRoot" Background="Transparent">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener>
</toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
...
</Grid>

There are several events built inside the Gesture Listener,

• Double-tap: Just like double-clicking, but with a finger instead of a mouse
• DragStarted, DragDelta, and DragCompleted: Three events that can be used together to implement easy drag-and-drop on Windows Phone
• Flick: Putting your finger down, moving it quickly, and then picking it back up.
• Hold: Putting your finger down and holding it in one place for a while
• PinchStarted, PinchDelta, and PinchCompleted: Three events that can be used together to tell if a user is pinching something, typically to zoom in or out
• Tap: Just like clicking, but with a finger instead of a mouse

You can create the events in codebehind or in XAML

in XAML you can have

<toolkit:GestureListener DoubleTap=”GestureListener_DoubleTap” Flick=”GestureListener_Flick”>
</toolkit:GestureListener>

In code behind, you can have

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
GestureService.GetGestureListener(LayoutRoot).DoubleTap += new EventHandler<GestureEventArgs>(GestureListener_DoubleTap);
GestureService.GetGestureListener(LayoutRoot).Flick += new EventHandler<FlickGestureEventArgs>(GestureListener_Flick);
}

Tutorial for gesture ends here 🙂

Don’t hesitate to leave comment if you meet any difficulties.