Handle basic Windows Runtime gesture events and customize the user experience for the static gestures described in the Windows touch language (such as tap, double tap, press and hold, and right tap).

Most apps process gestures (taps, pans, zooms, and so on) and do little with the raw pointer data except to pass it to gesture detection. In this sample, we use this raw pointer data in support of static gesture handling and processing to extend your app's interaction model and build upon the basic pointer events described in Quickstart: Pointers.

Updates for Windows 8.1: Windows 8.1 introduces a number of updates and improvements to the pointer input APIs. See API changes for Windows 8.1 for more info.

If you're new to developing apps using JavaScript: Have a look through these topics to get familiar with the technologies discussed here.

The platform control libraries (HTML and XAML) provide a full user interaction experience, including standard interactions, animated physics effects, and visual feedback. If you don't need customized interaction support, use these built-in controls.

If the platform controls are not sufficient, these user interaction guidelines can help you provide a compelling and immersive interaction experience that is consistent across input modes. These guidelines are primarily focused on touch input, but they are still relevant for touchpad, mouse, keyboard, and stylus input.

What are gesture events?

A gesture is the physical act or motion performed on, or by, the input device (one or more fingers on a touch surface, a pen/stylus digitizer, mouse, and so on). These natural interactions are mapped to operations on elements in both the system and your app. For more information, see Gestures, manipulations, and interactions.

The following table identifies the static gestures covered in this Quickstart.

Gesture

Description

Tap / double tap

A single contact that is released, or terminated, immediately.

Tapping on an element invokes its primary action.

A double tap is two taps in quick succession and can be handled as your app requires.

Entry state: One contact detected within the bounding rectangle of an object.

Motion: None.

Exit state: Contact released, or terminated.

Press and hold / right tap

A single contact that does not move until a time threshold is crossed.

Press and hold causes detailed information or teaching visuals (for example, a tooltip or context menu) to be displayed without a commitment to an action.

Right tap is closely associated with the press and hold gesture. The right tap event is fired when the press and hold is released.

Entry state: One contact detected within the bounding rectangle of an object.

Important If you implement your own interaction support, keep in mind that users expect an intuitive experience involving direct interaction with the UI elements in your app. We recommend that you model your custom interactions on the platform control libraries (HTML and XAML) to keep things consistent and discoverable. The controls in these libraries provide a full user interaction experience, including standard interactions, animated physics effects, visual feedback, and accessibility. Create custom interactions only if there is a clear, well-defined requirement and basic interactions don't support your scenario.

Create the UI

This example is a basic question and answer app. A square (inputBox) acts as the target object for detecting and processing pointer input and static gestures. The questions, clues, and answers are all displayed within this object.

The app provides the following user interaction functionality:

Double-tap: starts and stops the questions and the app timer.

Tap: cycles through the questions.

Press and hold: displays a set of clues for the current question, with a new clue displayed every few seconds while the contact remains down. This interaction behavior adheres to the Guidelines for visual feedback and touch language recommendations that state the press and hold gesture be limited to the display of informational UI.

Right-tap (or the press and hold release): displays a popup when the contact is lifted that asks the user if they would like the answer. Again, we adhere to the context menu recommendations in the Guidelines for visual feedback and Windows touch language.

Note To keep the focus on gesture handling code, reading question and answer data from an XML file and some UI and app functionality are not fully implemented.

Then we position the question and answer UI and and set up the interaction object to process the question and answer data from the XML file. The XML data details for this example can be reviewed in the complete listing at the end of this topic.

Configure the gesture recognizer.

Here, we set up the interaction handling.

In most cases, we recommend that you get pointer info through the event argument of the pointer event handlers in your chosen language framework.

If the event argument doesn't expose the pointer details required by your app, you can get access to extended pointer data from the event argument through the getCurrentPoint and getIntermediatePoints methods or currentPoint and intermediatePoints properties. We recommend using the getCurrentPoint and getIntermediatePoints methods as you can specify the context of the pointer data.

Tip For this example, there is only one object associated with a gesture recognizer. If your app contains a large number of objects that can be manipulated (such as a jigsaw puzzle), consider dynamically creating a gesture recognizer only when pointer input is detected on a target object. The gesture recognizer can be destroyed when the manipulation is complete (see Input: Instantiable gestures sample for an example of this). To avoid the overhead of creating and destroying gesture recognizers, create a small pool of gesture recognizers at initialization and dynamically assign those as required.

The input processor object includes the gesture recognizer (gr) that listens for and handles all pointer and gesture events. The question and answer UI is managed by the gesture recognizer event handlers.