MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Now I’m sure you’re asking some important questions. While I’ve been speaking of pinch-stretch,
rotation, and translation gestures as different things, how does one, in fact, differentiate these gestures
when they’re all coming into the app through the same MSGestureChange event? Doesn’t that just make
everything confusing? What’s the strategy for translation, rotation, and scaling gestures?
Well, the answer is—you don’t have to separate them! If you think about it for a moment, how you
handle MSGestureChange events and the data each one contains depends on the kinds of manipulations
you actually support in your UI:
• If you’re supporting only translation of an element, you’ll simply never pay any attention to
properties like scale and rotation and apply only those like translationX and translationY.
This would be the expected behavior for selecting an item in a collection control, for example (or
a control that allowed drag-and-drop of items to rearrange them).
• If you support only zooming, you’ll ignore all the positional properties and work with scale,
expansion, and/or velocityExpansion. This would be the sort of behavior you’d expect for a
control that supported optical or semantic zoom.
• If you’re interested in only rotation, the rotation and velocityAngular properties are your
friends.
Of course, if you want to support multiple kinds of manipulations, you can simply apply all of these
properties together, feeding them into CSS transforms, for instance. This would be expected of an app
that allowed arbitrary manipulation of on-screen objects, and it’s exactly what one of the gesture
samples of the Windows SDK demonstrates.
The Input Instantiable Gesture Sample
While the PointerEvents example included with this chapter gives us a raw view of pointer and gesture
events, what really matters to apps is how to apply these events to real manipulation of on-screen
objects, which is to say, implementing parts of touch language such as pinch/stretch and rotation. For
these we can turn to the Input Instantiable gestures sample.
This sample primarily demonstrates how to use gesture events on multiple elements simultaneously.
In Scenarios 1 and 2, the app simulates a simple example of a puzzle app, as mentioned earlier. Each
colored box can be manipulated separately, using drag to move (with or without inertia), pinch-stretch
gestures to zoom, and rotation gestures to rotate, as shown in Figure 9-4.
384