Wpf Wonderland

Oh to be the first kid in the neighborhood to get that new video game that the rest of your friends covet. What a sweet feeling to learn the secrets of the game, master the arcane moves and beat the game before everyone else. Once you’ve established yourself as the resident expert you’ll soon find your friends peppering you with a steady stream of questions on how to beat that grisly boss monster or solve that crafty last puzzle.

To stretch the analogy a little; in Redmond that kid is Microsoft Surface and the game they been playing for the last couple years is called multi-touch. They were one of the first groups to work on multi-touch inside Microsoft and they built a set of APIs that brought the awesomeness of multi-touch to the big table. Now the rest of the Microsoft kids are clamoring for their knowledge.

Windows 7, the next version of Microsoft’s ubiquitous operating system, has full support for multi-touch and exposes a number of touch APIs for the Windows developer. A few of these libraries come direct from the Surface team. In this article I will cover one of these Surface libraries; the Manipulation processor.

Nuts and Bolts

There are a number of terms to discuss before the digging into the sample code.

Fingers: Users can touch the screen with one or more fingers. They can also brush the screen with the palm of their hand or with an item like a paintbrush. The touchscreen hardware will turn some of these ‘touches’ into input that is processed by Windows. Windows sends out messages, either WM_TOUCH or WM_GESTURE, to interested applications.

Gesture: A gesture is a sequence of touch moves that mean something special to the OS. Gestures are built in to the Windows 7 OS so will be consistent across all applications.

The Gesture Catalog

Scroll : The most popular gesture during testing and usability studies. Drag up or down on the content. If the window has a scrollbar the touch API will interpret this motion as if you were interacting with the scrollbar.

Drag: Touch and slide your finger on screen. This is similar to dragging content with your mouse.

Tap: When the user touches the screen and lifts their finger before the preset ‘hold time’ the OS consider that to be a Tap.

Double-Tap: Same as the Tap gesture except that the user touches the screen twice in rapid succession.

Two Finger Tap: Similar to the Tap gesture except you tap with two fingers simultaneously.

Zoom : Pinch two fingers together to zoom in on an element. Spread them apart to zoom out on an element.

Rotate: Touch two locations on an item and twist. This is interpreted as a rotation.

Press and Hold: Hold a finger to the screen for longer than the ‘hold time’ and get a Hold. This is the same a mouse right-click.

Flick: A fast dragging motion to the left or right is interpreted as a Flick. Useful in applications, like a browser, that contain forward and backward features.

Most of these gestures work in applications running on Windows 7 without any extra coding by the developer. The Rotate and Two Finger Tap gestures are the exceptions to this rule.

Manipulation and Inertia

Gestures are powerful and easy to use. In fact gestures just work in most Windows applications. But you can’t easily combine gestures. If the user makes a Zoom gesture you can catch the event and scale an element, but you can’t move the element at the same time. If you want to move an item you have to listen for the Drag gesture instead. The touch framework offers two classes specialize in interpreting complex touch gestures and converting them to easy to use matrix transforms.

Manipulation processor: This is the primary engine that gathers sophisticated touch movements and converts them into a matrix transform for your consumption.

Inertia processor: If the Manipulation processer detects that movement had crossed a velocity threshold it can invoke the Inertia processer. This processor exposes methods that provide simple physics calculations to simulate friction drag, inertial damping, smooth deceleration, edge detection and boundary bounce.

WPF and Touch

The Surface team wrote the Manipulation and Inertia processors a number of years ago. Their choice at the time was to build them as COM components. The Window 7 team on the other hand wrote most of their touch APIs in native code. The WPF team is creating managed wrappers around both these libraries to simplify your life. They are exposing most of the touch API through changes to UIElement. For example they have added some new events that return Manipulation and Inertia references.

· ManipulationStarted

· ManipulationDelta

· ManipulationInertiaStarting

· ManipulationCompleted

· ManipulationBoundaryFeedback

What’s next

In part two of this article I will show you how to use the Manipulation events to listen to the touch framework and modify your UI elements.