Ning Zhang's Blog

This post is a slight modification of Touch and Manipulation on MSDN, as a quick overview and reference for myself on WPF touch support.

Overview

New hardware and API in the Windows 7 operating system provide applications the ability to receive input from multiple touches simultaneously. WPF enables applications to detect and respond to touch in a manner similar to responding to other input, such as the mouse or keyboard, by raising events when touch occurs.

WPF exposes two types of events when touch occurs: touch events and manipulation events. Touch events provide raw data about each finger on a touchscreen and its movement. Manipulation events interpret the input as certain actions.

Prerequisites

You need the following components to develop an application that responds to touch.

• Microsoft Visual Studio 2010.
• Windows 7.
• A device, such as a touchscreen, that supports Windows Touch.

WPF exposes two types of events when touch occurs: touch events and manipulation events. Touch events provide raw data about each finger on a touchscreen and its movement. Manipulation events interpret the input as certain actions.

Terminology

The following terms are used when touch is discussed.

• Touch is a type of user input that is recognized by Windows 7. Usually, touch is initiated by putting fingers on a touch-sensitive screen. Note that devices such as a touchpad that is common on laptop computers do not support touch if the device merely converts the finger’s position and movement as mouse input.
• Multitouch is touch that occurs from more than one point simultaneously. Windows 7 and WPF supports multitouch. Whenever touch is discussed in the documentation for WPF, the concepts apply to multitouch.
• A manipulation occurs when touch is interpreted as a physical action that is applied to an object. In WPF, manipulation events interpret input as a translation, expansion, or rotation manipulation.
• A touch device represents a device that produces touch input, such as a single finger on a touchscreen.

Controls that Respond to Touch

The following controls can be scrolled by dragging a finger across the control if it has content that is scrolled out of view.

• ComboBox
• ContextMenu
• DataGrid
• ListBox
• ListView
• MenuItem
• TextBox
• ToolBar
• TreeView

The ScrollViewer defines the ScrollViewer.PanningMode attached property that enables you to specify whether touch panning is enabled horizontally, vertically, both, or neither. The ScrollViewer.PanningDeceleration property specifies how quickly the scrolling slows down when the user lifts the finger from the touchscreen. The ScrollViewer.PanningRatio attached property specifies the ratio of scrolling offset to translate manipulation offset.

Class Diagram

Below class diagram highlights the key classes and their members for touch support:

• Touch
  • Touch events are exposed both by UIElement, UIElement3D, and ContentElement as bubbling events, and via Touch.FrameReported as application level event (to be compatible with Silverlight).
  • While touch down, move and up events are both tunneling and bubbling, touch enter and leave events are bubbling only.
  • Touch device capture is explicit via UIElement.CaptureTouch method.
  • Touch events are synchronous.
  • Touch events are always fired, whether manipulation events are fired or not.
  • WPF supports multitouch.
• Manipulation
  • Manipulation events are exposed by UIElement as bubbling event only.
  • Manipulation events are fired on an UIElement only its IsManipulationEnabled is true.
  • Manipulation events are synchronous.
  • WPF supports three types of manipulation: expansion and rotation (including single finger rotation with pivot point), and inertia.
  • Touch device capture is implicit with manipulation.
  • Static class Manipulation contains methods to get and update manipulation parameters outside of manipulation event handlers. It also contains methods for more advanced usage of manipulation logic, such as adding adding and removing manipulators. 
  • WPF supports multiple gestures.
  • WPF doesn’t support gestures, or 3D manipulation.
• ScrollViewer has built-in support for manipulation and inertia, and it is customizable by applications.

Touch

Touch Events

The base classes, UIElement, UIElement3D, and ContentElement, define events that you can subscribe to so your application will respond to touch. Touch events are useful when your application interprets touch as something other than manipulating an object. For example, an application that enables a user to draw with one or more fingers would subscribe to touch events.

All three classes define the following events, which behave similarly, regardless of the defining class.

• TouchDown
• TouchMove
• TouchUp
• TouchEnter
• TouchLeave
• PreviewTouchDown
• PreviewTouchMove
• PreviewTouchUp
• GotTouchCapture
• LostTouchCapture

Like keyboard and mouse events, the touch events are routed events. The events that begin with Preview are tunneling events and the events that begin with Touch are bubbling events. When you handle these events, you can get the position of the input, relative to any element, by calling the GetTouchPoint or GetIntermediateTouchPoints method.

The Execution Path of Touch Events

To understand the interaction among the touch events, consider the scenario where a user puts one finger on an element, moves the finger in the element, and then lifts the finger from the element. The following illustration shows the execution of the bubbling events (the tunneling events are omitted for simplicity).

The following list describes the sequence of the events in the preceding illustration.

1. The TouchEnter event occurs one time when the user puts a finger on the element.

2. The TouchDown event occurs one time.

3. The TouchMove event occurs multiple times as the user moves the finger within the element.

4. The TouchUp event occurs one time when the user lifts the finger from the element.

5. The TouchLeave event occurs one time.

   When more than two fingers are used, the events occur for each finger.

Manipulation and Inertia

Manipulation Events

For cases where an application enables a user to manipulate an object, the UIElement class defines manipulation events. Unlike the touch events that simply report the position of touch, the manipulation events report how the input can be interpreted. There are three types of manipulations, translation, expansion, and rotation. The following list describes how to invoke the three types of manipulations.

• Put a finger on an object and move the finger across the touchscreen to invoke a translation manipulation. This usually moves the object.

• Put two fingers on an object and move the fingers closer together or farther apart from one another to invoke an expansion manipulation. This usually resizes the object.

• Put two fingers on an object and rotate the fingers around each other to invoke a rotation manipulation. This usually rotates the object.

More than one type of manipulation can occur simultaneously.

When you cause objects to respond to manipulations, you can have the object appear to have inertia. This can make your objects simulate the physical world. For example, when you push a book across a table, if you push hard enough the book will continue to move after you release it. WPF enables you to simulate this behavior by raising manipulation events after the user’s fingers releases the object.

For information about how to create an application that enables the user to move, resize, and rotate an object, see Walkthrough: Creating Your First Touch Application.

The UIElement defines the following manipulation events.

• ManipulationStarting

• ManipulationStarted

• ManipulationDelta

• ManipulationInertiaStarting

• ManipulationCompleted

• ManipulationBoundaryFeedback

By default, a UIElement does not receive these manipulation events. To receive manipulation events on a UIElement, set UIElement.IsManipulationEnabled to true.

The Execution Path of Manipulation Events

Consider a scenario where a user "throws" an object. The user puts a finger on the object, moves the finger across the touchscreen for a short distance, and then lifts the finger while it is moving. The result of this is that the object will move under the user’s finger and continue to move after the user lifts the finger.

The following illustration shows the execution path of manipulation events and important information about each event.

Manipulation events

The following list describes the sequence of the events in the preceding illustration.

1. The ManipulationStarting event occurs when the user places a finger on the object. Among other things, this event allows you to set the ManipulationContainer property. In the subsequent events, the position of the manipulation will be relative to the ManipulationContainer. In events other than ManipulationStarting, this property is read-only, so the ManipulationStarting event is the only time that you can set this property.

2. The ManipulationStarted event occurs next. This event reports the origin of the manipulation.

3. The ManipulationDelta event occurs multiple times as a user’s fingers move on a touchscreen. The DeltaManipulation property of the ManipulationDeltaEventArgs class reports whether the manipulation is interpreted as movement, expansion, or translation. This is where you perform most of the work of manipulating an object.

4. The ManipulationInertiaStarting event occurs when the user’s fingers lose contact with the object. This event enables you to specify the deceleration of the manipulations during inertia. This is so your object can emulate different physical spaces or attributes if you choose. For example, suppose your application has two objects that represent items in the physical world, and one is heavier than the other. You can make the heavier object decelerate faster than the lighter object.

5. The ManipulationDelta event occurs multiple times as inertia occurs. Note that this event occurs when the user’s fingers move across the touchscreen and when WPF simulates inertia. In other words, ManipulationDelta occurs before and after the ManipulationInertiaStarting event. The ManipulationDeltaEventArgs.IsInertial property reports whether the ManipulationDelta event occurs during inertia, so you can check that property and perform different actions, depending on its value.

6. The ManipulationCompleted event occurs when the manipulation and any inertia ends. That is, after all the ManipulationDelta events occur, the ManipulationCompleted event occurs to signal that the manipulation is complete.

Boundary Feedback

The UIElement also defines the ManipulationBoundaryFeedback event. This event occurs when the ReportBoundaryFeedback method is called in the ManipulationDelta event. The ManipulationBoundaryFeedback event enables applications or components to provide visual feedback when an object hits a boundary. For example, the Window class handles the ManipulationBoundaryFeedback event to cause the window to slightly move when its edge is encountered.

Mouse Promotion

You can cancel the manipulation by calling the Cancel method on the event arguments in any manipulation event except ManipulationBoundaryFeedback event. When you call Cancel, the manipulation events are no longer raised and mouse events occur for touch. The following table describes the relationship between the time the manipulation is canceled and the mouse events that occur.

Note that if you call Cancel when the manipulation is in inertia, the method returns false and the input does not raise mouse events.

The Relationship Between Touch and Manipulation Events

A UIElement can always receive touch events. When the IsManipulationEnabled property is set to true, a UIElement can receive both touch and manipulation events. If the TouchDown event is not handled (that is, the Handled property is false), the manipulation logic captures the touch to the element and generates the manipulation events. If the Handled property is set to true in the TouchDown event, the manipulation logic does not generate manipulation events. The following illustration shows the relationship between touch events and manipulation events.

Touch and manipulation events

The following list describes the relationship between the touch and manipulation events that is shown in the preceding illustration.

• When the first touch device generates a TouchDown event on a UIElement, the manipulation logic calls the CaptureTouch method, which generates the GotTouchCapture event.

• When the GotTouchCapture occurs, the manipulation logic calls the Manipulation.AddManipulator method, which generates the ManipulationStarting event.

• When the TouchMove events occur, the manipulation logic generates the ManipulationDelta events that occur before the ManipulationInertiaStarting event.

• When the last touch device on the element raises the TouchUp event, the manipulation logic generates the ManipulationInertiaStarting event.

EventArgs Class Diagram

Below class diagram shows all the touch and manipulation EventArgs classes and relevant types.

Be Sociable, Share!

•