Responding to touchpad interactions (XAML)

  • Article

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.

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).

Conceptual

Responding to user interaction