A Windows Phone 7 device touch input in the form of gestures. In Windows Phone OS, a touch gesture involves tapping or swiping one or more fingers on a touch screen.

A Windows Phone 7 Application can use the following gestures:

Single-touch gestures

  • Tap
  • Double Tap
  • Pan
  • Flick
  • Touch and Hold

Multi-touch gestures

  • Pinch and Stretch


A Windows Phone 7 application using XNA Framework supports more gestures with much better support. I would be providing more details on gestures in both the Silverlight and XNA framework along with their differences later.

Gesture Basics

Tap

A tap is a single, brief touch on the screen within a bounded area and back up off the screen again.

UX_Interactions_Tap

There are two behaviors associated with a tap gesture:

  • Finger down provides touch indication
  • Finger up executes the action

A tap also stops any type of content from moving on the screen.

Double Tap

A double tap is two quick taps within a bounded area.

UX_Interactions_DoubleTap

A double tap toggles between in and out zoom states of a control or an application. The application determines its current zoomed state and zooms in or zooms out accordingly.

The application defines the zoomed-in and zoomed-out states.

Pan

A pan is a single finger placed down and moved across the screen in any direction. The pan gesture ends when the finger is lifted from the screen.

UX_Interactions_Pan

Flick

A flick is a single finger down moved rapidly in any direction and ends with the finger lifted up off the screen. A flick can follow a pan gesture.

UX_Interactions_Flick

A flick gesture moves content from one area to another area. The controls or the application can be configured to support specific flicking directional behavior.

Flick moves the whole canvas, but developers can specify individual objects to be moved instead.

Pinch and Stretch

A pinch and stretch is two fingers down within separate bounded areas followed by the fingers moving closer together (pinch) or further apart (stretch).

UX_Interactions_PinchAndStretch

Pinch and stretch provides continuous zoom on content with the center of the zoom located at the center of the two fingers.

Touch and Hold

UX_Interactions_TouchAndHold

Touch and hold is a single finger down within a bounded area for a defined period of time. The touch and hold gesture should generally be used to display a context menu or options page for an item.

Detecting gestures

There are many methods by which you can detect a Gesture in a Windows Phone 7 application

  • Using UIElement

All Silverlight controls that inherit from UIElement have support for Tap, Double Tap and Hold gestures. These events are available on the UIElement and can be directly used to perform actions when thse gestures are used.

  • Using Manipulation Events

Silverlight for Windows Phone allows you to process touch input by using manipulation events. This is more of a complex approach and requires good knowledge of the UI and touch points.

  • Silverlight Toolkit’s Gesture Service

This is the simplest approach to detect gestures.

<toolkit:GestureService.GestureListener>
    <toolkit:GestureListener  Flick="GestureListener_Flick"  />
</toolkit:GestureService.GestureListener>

However, I would like to say that, using an external method from toolkit to detect gestures can lead to an additional overhead on the application. I have not yet done any profiling using this gesture detection method yet. I would provide more details as I have them later.

  • XNA framework

Another method is to use the XNA framework dlls in your Silverlight Application to detect gestures. I have not used this method, but know that it exists. I would recommend not to use this method unless all the above methods are not applicable in your scenario.

More on all these gesture detection methods along with in my future posts. So stay connected.

Related Links

Advertisements

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s