Responding to touchpad interactions (XAML)

Design and build Windows Store apps that users can interact with through a touchpad.

This documentation is relevant for developers building Windows Store apps for tablets and computers that have an attached digitizer that accepts pen input. The digitizer can be beneath the surface of the screen, or attached as a peripheral device.

Tip  The info in this topic is specific to developing Windows Store app using C++, C#, or Visual Basic.

See Responding to touchpad interactions (HTML) for Windows Store apps using JavaScript.

 

Prerequisites: If you're new to developing Windows Store app using C++, C#, or Visual Basic, have a look through these topics to get familiar with the technologies discussed here.

Create your first Windows Store app using C# or Visual Basic

Create your first Windows Store app using C++

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Store apps using C++

Learn about events with Events and routed events overview

App features, start to finish: Explore this functionality in more depth as part of our App features, start to finish series

User interaction, start to finish (XAML)

User interaction customization, start to finish (XAML)

User experience guidelines:

The platform control libraries (HTML and XAML) provide the full Windows 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.

• Guidelines for common user interactions
• Guidelines for optical zoom and resizing
• Guidelines for panning
• Guidelines for rotation
• Guidelines for Semantic Zoom
• Guidelines for visual feedback

Samples: See this functionality in action in our Windows Store app samples.

Input: Windows 8 gestures sample

Input: XAML user input events sample

XAML scrolling, panning, and zooming sample

Overview

A touchpad combines indirect multi-touch input with the precision input of a pointing device, such as a mouse. This combination makes the touchpad suited to both touch-optimized UI and the typically smaller targets of productivity apps and the desktop environment. Optimize your Windows Store app design for touch input and get touchpad support by default.

Because of the convergence of interaction experiences supported by touchpads we recommend using the PointerEntered event to provide mouse-style UI commands in addition to the built-in support for touch input. For example, use previous and next buttons to let users flip through pages of content as well as pan through the content.

The gestures and guidelines discussed in this topic can help ensure your app supports touchpad input seamlessly and with minimal code.

User experience guidelines for supporting touchpad interactions

Windows supports a set of familiar gestures that are optimized for touchpad input. Here are some guidelines for supporting touchpad interactions.

The Windows 8.1 touchpad language

A concise set of touchpad interactions are used consistently throughout the system. Optimize your app for touch and mouse input and this language makes your app feel instantly familiar for your users, increasing their confidence and making your app easier to learn and use.

Term	Description
Hover to learn	Hover over an element to display more detailed info or teaching visuals (such as a tooltip) without a commitment to an action. For more info on tooltips, see Adding tooltips.
Single finger tap for primary action	Use a single finger to tap an element and invoke its primary action (such as launching an app or executing a command).
Two finger tap to right-click	Tap with two fingers simultaneously to display the app bar with global commands or on an element to select it and display the app bar with contextual commands. Note  Two finger tap to display a context menu if selection or app bar commands are not appropriate UI behaviors. However, we strongly recommend that you use the app bar for all command behaviors.
Two finger slide to pan	Slide is used primarily for panning interactions but can also be used for moving, drawing, or writing.
Pinch and stretch to zoom	The pinch and stretch gestures are commonly used for resizing and Semantic Zoom.
Single finger press and slide to rearrange	Drag an element.
Single finger press and slide to select text	Press within selectable text and slide to select it. Double-tap to select a word.
Left and right click zone	Emulate the left and right button functionality of a mouse device.
Edges for system commands (system dependent)	Swiping from the right edge (or left edge on right-to-left layouts) of the screen reveals the charms that expose system commands. Swiping from the left edge (or right edge on right-to-left layouts) reveals a list of running apps.

 

Hardware

Query the mouse device capabilities (MouseCapabilities) to identify what aspects of your app UI the touchpad hardware can access directly. We recommend providing UI for both touch and mouse input.

For more info on querying device capabilities, see Quickstart: Identifying pointer devices.

Visual feedback

• When a touchpad cursor is detected (through move or hover events), show mouse-specific UI to indicate functionality exposed by the element. If the touchpad cursor doesn't move for a certain amount of time, or if the user initiates a touch interaction, make the touchpad UI gradually fade away. This keeps the UI clean and uncluttered.
• Don't use the cursor for hover feedback, the feedback provided by the element is sufficient (see Cursors below).
• Don't display visual feedback if an element doesn't support interaction (such as static text).
• Don't use focus rectangles with touchpad interactions. Reserve these for keyboard interactions.
• Display visual feedback concurrently for all elements that represent the same input target.

For more general guidance on visual feedback, see Guidelines for visual feedback.

Cursors

A set of standard cursors is available for a touchpad pointer. These are used to indicate the primary action of an element.

Each standard cursor has a corresponding default image associated with it. The user or an app can replace the default image associated with any standard cursor at any time. Windows Store apps specify a cursor image through the PointerCursor function.

If you need to customize the mouse cursor:

• Always use the arrow cursor () for clickable elements. Don't use the pointing hand cursor () for links or other interactive elements. Instead, use hover effects (described earlier).
• Use the text cursor () for selectable text.
• Use the move cursor () when moving is the primary action (such as dragging or cropping). Don't use the move cursor for elements where the primary action is navigation (such as Start tiles).
• Use the horizontal, vertical and diagonal resize cursors (, , , ), when an object is resizable.
• Use the grasping hand cursors (, ) when panning content within a fixed canvas (such as a map).

Related topics

Conceptual

Responding to user interaction