Touch Input
Silverlight quickstart for Windows Phone development
Windows Phone devices have multi-touch screens that enable users to use multiple fingers simultaneously to produce different input gestures such as tapping, flicking, or pinching. Silverlight for Windows Phone has a number of different mechanisms for handling touch input. This QuickStart covers the basics of using touch input in your Silverlight for Windows Phone applications.
This QuickStart contains the following sections:
- Introduction to Touch Input
- Gestures
- Using Mouse Events
- Using Manipulation Events
- Silverlight for Windows Phone Toolkit
- UI Design and Touch Input
Note
The live samples in this QuickStart use Silverlight running in the browser to simulate the behavior in Silverlight for Windows Phone. The actual behavior may be slightly different in the Windows Phone emulator or on a Windows Phone device.
Introduction to Touch Input
Windows Phone devices use touch for a majority of user input. Windows Phone supports multi-touch screens that enable users to use natural gestures to interact with the device. Adding touch and gesture support to your applications can greatly enhance the user experience. There are a number of different ways you can handle touch input in your Silverlight for Windows Phone applications.
The Silverlight mouse events can be used to detect simple, one-finger gestures such as tap and double tap. Mouse event handlers can be quickly added to your application and are an easy way to get basic touch support.
The manipulation events, such as ManipulationStarted and ManipulationDelta, are used to handle more complex gestures such as multi-touch gestures and gestures that use inertia and velocity data.
The TouchPoint class is another way of handling touch input in Silverlight for Windows phone. TouchPoint is a lower-level input system that isn't covered in this QuickStart.
A forth way you can handle touch and gestures is with the GestureService and GestureListner classes in the Silverlight for Windows Phone Toolkit. The toolkit is an open source project and not part of the core Silverlight for Windows Phone, but a number of classes that first appeared in the toolkit were eventually included in subsequent releases of Silverlight.
Gestures
Gestures are a high-level way of interpreting touch input data into a set of common motions such as tapping, flicking, and pinching. Some common gestures used in Windows Phone are:
| Gesture | Description |
|---|---|
| Tap | A finger touches the screen and releases. |
| Double Tap | A finger taps the screen twice. |
| Hold | A finger touches the screen and briefly holds in place. |
| Drag | A finger touches the screen and moves in any direction. |
| Flick | A finger drags across the screen and lifts up without stopping. |
| Pinch | Two fingers press on the screen and move around. |
The Silverlight for Windows phone mouse events such as MouseLeftButtonUp and MouseMove can be used to support simple, one-finger gestures such as tapping.
For multi-touch gestures such as pinching, and gestures that use inertia and velocity data such as flicking, the manipulation events are used. The information provided by the manipulation events isn't in the form of the gesture that was performed, but rather is touch data such as position, translation delta, and velocity. This touch data can be used to determine the type of gesture that was performed. It's the responsibility of the Silverlight developer to convert this information into the equivalent gesture. With that said, the Silverlight for Windows Phone Toolkit provides gesture support through the GestureService and GestureListner classes.
Using Mouse Events
The simplest way to enable touch input in your Silverlight for Windows Phone application is by using mouse events. Mouse events are limited to single-finger gestures such as tap and double tap, and they don't support velocity-based gestures. Single finger touches on the screen are converted to an equivalent Silverlight mouse event such as MouseLeftButtonDown when you place your finger on the screen, MouseLeftButtonUp when you lift your finger, and MouseMove when you drag your finger across the screen. Other mouse events that are used by Silverlight for Windows Phone are MouseLeave and MouseEnter. The event arguments for the mouse events are MouseButtonEventArgs.
The Click event on the Button class is another easy way to add support for tap gestures on buttons.
The following example shows how to use the MouseLeftButtonDown, MouseLeftButtonUp, and the MouseLeave events to handle a tap gesture on a Rectangle object.
First, a Rectangle named TestRectangle is created in XAML and event handlers are added for the MouseLeftButtonDown, MouseLeftButtonUp, and the MouseLeave events.
XAML
Next, event handlers for the mouse events are created. The MouseLeftButtonDown event handler increases the Height and Width of the Rectangle. The MouseLeftButtonUp event handler sets the Height and Width back to their starting values. Finally, the MouseLeave event handler also sets the Height and Width back to their starting value.
C#
Visual Basic
The following live sample demonstrates the mouse events tapping sample. To try this live sample, click on the rectangle.
The next sample shows how to use the Click event on a Button to handle tap gestures.
Frist, a Button is created in XAML and an event handler is added for the Click event.
XAML
In the Click event handler, the content of the button is toggled between "Tap" and "Tap Again!". The text changes each time the button is tapped.
C#
Visual Basic
The following live sample demonstrates the Button click sample. To try this live sample, click on the button.
Using Manipulation Events
If you need to support multiple finger gestures in your Silverlight application, or gestures that use velocity data, then you'll need to use the manipulation events. You can use manipulation events to detect gestures such as flick, drag, pinch, and hold. The following table lists the manipulation event classes in Silverlight for Windows Phone.
| Class | Description |
|---|---|
| ManipulationStarted Event | Occurs when an input device begins a manipulation on the UIElement. |
| ManipulationDelta Event | Occurs when the input device changes position during a manipulation. |
| ManipulationCompleted Event | Occurs when a manipulation and inertia on the UIElement are complete. |
| ManipulationStartedEventArgs | Provides data for the ManipulationStarted event. |
| ManipulationDeltaEventArgs | Provides data for the ManipulationDelta event. |
| ManipulationVelocities | Describes the speed at which manipulations occur. |
| ManipulationCompletedEventArgs | Provides data for the ManipulationCompleted event. |
A gesture event in Silverlight for Windows Phone consists of a series of manipulation events. Each gesture starts with a ManipulationStarted event, such as when a user touches the screen. Next, one or more ManipulationDelta events are fired. For example, if you touch the screen and then drag your finger across the screen, a number of ManipulationDelta events are fired. Finally, a ManipulationCompleted event is raised when the gesture is finished.
If you're using the Windows Phone emulator to test your manipulation event code and you don't have a touch-screen monitor, you'll be limited in what you can test. The emulator doesn't support multi-touch with the mouse. You can test translations though, as the following example demonstrates.
The following example shows how to use the ManipulationDelta events to handle a drag gesture. The sample creates a Rectangle that can be dragged across the screen.
First, a Rectangle named TestRectangle is created in XAML with a Height and Width of 200.
XAML
Next, a global TranslateTransform named dragTranslation is created for translating the Rectangle. An event handler is added to the Rectangle to handle the ManipulationDelta event, and dragTranslation is added to the RenderTransform of the Rectangle. Finally, in the ManipulationDelta event handler, the position of the Rectangle is updated by using the TranslateTransform on the DeltaManipulation property.
C#
Visual Basic
The following image shows the sample running in the Windows Phone emulator. This is not a live sample.
Silverlight for Windows Phone Toolkit
The Silverlight for Windows Phone Toolkit is an open source project where the Microsoft Silverlight team shares new components and functionality that's not in the core Silverlight for Windows Phone. The toolkit includes a rich gesture framework that uses GestureService and GestureListener classes to detect specific gestures. These classes can greatly simplify the use of gestures in your Silverlight application.
To use the API from the Silverlight for Windows Phone Toolkit you'll need to download and install the toolkit. The Silverlight Tool Kit release page has instructions for downloading the current release.
UI Design and Touch Input
How you design your user interface can influence how easy your application is to use with touch input. The User Experience Design Guidelines for Windows Phone has a number of best practices for using touch input in your applications. It's worth reading, but here are a few highlights dealing with touch and UI design:
- All simple commands in your application should be accomplished with a single finger.
- Touch controls should respond immediately. Even a slight lag between when a user touches the screen and when the control responds can be noticeable and affect user experience.
- Provide immediate visual or auditory feedback.
- If an operation takes a long time, consider providing incremental feedback.
- Touch targets should not be smaller than 9mm or 34 pixels.
- 2mm or 8 pixels should be provided between touchable controls.
- In rare cases, controls can be smaller, but you should never create a control smaller than 7mm or 26 pixels square.
- For frequently used touch controls, consider making the controls larger than 9mm.
- The touch target can be larger than the touch element, but it should not be smaller.
- The touch element shouldn't be more than 60% smaller than the touch target.
- Oblong controls in vertically constrained UIs are easier to hit.
