Today’s tip focuses on the GestureListener that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

About the GestureListener

The GestureListener provides an easy way for you to detect touch gestures in your application.  It provides easy-to-implement listeners for the following gestures:

• 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 read more about these touch gestures in the Windows Phone Design and Interaction Guide.

Using the Gesture Listener

To use the GestureListener, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

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

   3: mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

The GestureService comes in two pieces: The GestureService.GestureListener and the GestureListener.  They’re used like this

   1: <Button Content="Gesturific">

   2:     <toolkit:GestureService.GestureListener>

   3:         <toolkit:GestureListener 

   4:             DoubleTap="GestureListenerDoubleTap"

   5:             Hold="GestureListenerHold"      />

   6:     </toolkit:GestureService.GestureListener>

   7: </Button>

The XAML above sets up a button that can respond to the double-tap and hold events.

In your code-behind, you can access the GestureEventArgs object to get the original source and the position of the finger when the event completed.  Or, you can just throw up a silly message box like I did.

   1: private void GestureListenerDoubleTap(object sender, GestureEventArgs e)

   2: {

   3:     MessageBox.Show("Yep, you tapped it twice.");

   4: }

   5:  

   6: private void GestureListenerHold(object sender, GestureEventArgs e)

   7: {

   8:     MessageBox.Show("Button held.");

   9: }

That’s it!  Easy peasy.

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day