Windows Phone 7 Gestures Cheat Sheet

Windows Phone 7 Gestures

Along with the Windows Phone 7 Developer Tools RTM release, the Silverlight team also shipped the Silverlight for Windows Phone Toolkit.  Not only does the toolkit add much needed controls like DatePicker, TimePicker and WrapPanel; but there’s also very Phone-ish components included called GestureService and GestureListener.

Previously, the Manipulation events were the way to capture gestures, but figuring out which type of gesture just occurred is up to you as a developer.  Now with the GestureService that code has just been handed to you.

Although its not rocket science to use the GestureService/ GestureListener combo, I thought I’d share some notes here after some investigation.  There’s not much documentation, so hopefully this will help others get started.

  • First, make sure the Toolkit is installed
  • Add a reference to the assembly named “Microsoft.Phone.Controls.Toolkit” to your project.
  • Reference the assembly in the XAML of your UserControl by adding the namespace:
  • Add an instance of a GestureListener to the element you want to capture gestures on.  The example below adds a GestureListener to the popular LayoutRoot Grid:
  • For simple Gestures you can handle a single event on the GestureListener
    • Tap – EventArgs: (point)Origin, (object)OriginalSource
    • DoubleTap – EventArgs: (point)Origin, (object)OriginalSource
    • Flick – EventArgs: (double)Angle, (Orientation)Direction, (double)HorizontalVelocity, (double)VerticalVelocity
  • (As a quick note, Orientation only offers Horizontal and Vertical)
  • For a simple direction-only Pan use:
    • DragStarted – to catch it instantly, EventArgs: (Orientation)Direction
    • DragCompleted – to catch it when its over, you can also compare Velocities to check for diagonals, EventArgs: (Orientation)Direction, (double) HorizontalVelocity, (double) VerticalVelocity, (double) HorizontalChange, (double) VerticalChange
  • For a tracking position Pan use:
    • Tap – capture original touch coordinate
    • DragStarted – start monitoring for DragDelta
    • DragDelta – modify element based off changes, original coordinates stored if need, EventArgs: (Orientation) Direction, (double) HorizontalChange, (double) VerticalChange
    • DragCompleted – check the total change amount and possibly snap into new position or back to previous position if change is not large enough.

Suggestions, feedback and other links are welcome!

5 thoughts on “Windows Phone 7 Gestures Cheat Sheet

Leave a Reply