Quickstart: Touch input (Windows Store apps using C#/VB/C++ and XAML)

Windows 8 devices often have multi-touch screens that enable users to use multiple fingers simultaneously to produce different input interactions such as tapping, dragging, or pinching. The Windows Runtime has a number of different mechanisms for handling touch input, enabling you to create an immersive experience that your users can explore with confidence. This Quickstart covers the basics of using touch input in a Windows Store app built for Windows using C++, C#, or Visual Basic. For more code examples, see the Input sample.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

Prerequisites

This topic assumes that you can create a basic Windows Store app using C++, C#, or Visual Basic. For instructions on creating your first Windows Store app, see Building your first Windows Store app using C++, C#, or Visual Basic.

User experience guidelines (best practices)

Although this topic covers some basics of touch implementation, there are a number of user experience guidelines you should keep in mind for specific touch scenarios. See below for details:

• Guidelines for user interaction
• Guidelines for cross-slide
• Guidelines for optical zoom and resizing
• Guidelines for panning
• Guidelines for rotation
• Guidelines for semantic zoom
• Guidelines for selecting text and images
• Guidelines for targeting
• Guidelines for visual feedback

Introduction to touch input

Many Windows 8 devices use touch for a majority of user input. Windows 8 supports multi-touch screens that enable users to use natural interactions to interact with the device. Adding touch and interaction support to your apps can greatly enhance the user experience. However, you should design your touch support carefully to ensure that your users can explore your app with confidence. Additionally, you must also be sure that your app accommodates traditional mouse and keyboard input even while it is touch optimized.

There are a number of different ways you can handle touch input in your Windows Store apps using C++, C#, or Visual Basic. The built-in control library provides default touch, mouse, and keyboard support using standard interactions, animated physics effects, and visual feedback.

If you do not require customized touch support, you can use what the framework provides and follow a few simple guidelines for touch optimization, described later in this QuickStart.

You can implement your own touch and interaction support, but keep in mind that users expect an intuitive experience involving direct interaction with the elements of your app. You should model your custom touch support on the built-in support in order to keep things simple and discoverable. Additionally, you should provide immediate visual feedback for all interactions to avoid user uncertainty and encourage exploration.

To provide customized touch support, you can handle UIElement events that are grouped into three different levels of abstraction. High-level events such as Tapped enable you to respond to simple interactions. Pointer events provide lower-level details, such as pointer motion and distinguishing press and release gestures. Manipulation events provide even lower-level details, such as gesture speed and inertia and multi-touch data. These events automatically support both touch and mouse input, but also provide info to enable you to distinguish the actual input device if necessary.

Gestures

Gestures are a high-level way of interpreting touch input data into a set of common motions such as tapping, sliding, and pinching. Some common gestures used in Windows 8 are:

You can respond to simple touch and mouse gestures by handling high-level events such as Tapped, DoubleTapped, RightTapped, and Holding. You can also disable these gestures for particular elements by setting IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabled, and IsHoldingEnabled to false.

Pointer events such as PointerMoved can be used to support simple, one-finger interactions such as sliding.

For multi-touch interactions such as pinching, and interactions that use inertia and velocity data such as dragging, you use the manipulation events. The information provided by the manipulation events isn't in the form of the interaction that was performed, but rather is touch data such as position, translation delta, and velocity. You can use this touch data to determine the type of interaction that was performed. However, it is your responsibility to convert this information into the equivalent interaction.

Using pointer events

Pointer events automatically support touch and mouse input, and replace more traditional mouse events.

Touch-based pointer events are limited to single-finger interactions such as tap and slide, and they don't support velocity-based interactions. Single finger touches on the screen are converted to an equivalent Windows Runtime pointer event such as PointerPressed when you place your finger on the screen, PointerReleased when you lift your finger, and PointerMoved when you drag your finger across the screen. Other pointer events that are used by a Windows Store app using C++, C#, or Visual Basic are PointerExited and PointerEntered. The event arguments for the pointer events are PointerRoutedEventArgs.

The following example shows how to use the PointerPressed, PointerReleased, and the PointerExited events to handle a tap interaction on a Rectangle object.

First, a Rectangle named TestRectangle is created in XAML and event handlers are added for the PointerPressed, PointerReleased, and the PointerExited events.

<Rectangle Name="TestRectangle"
  Height="100" Width="200" Fill="Blue"
  PointerPressed="TestRectangle_PointerPressed"
  PointerReleased="TestRectangle_PointerReleased"
  PointerExited="TestRectangle_PointerExited" />

Next, event handlers for the pointer events are created. The PointerPressed event handler increases the Height and Width of the Rectangle. The PointerReleased event handler sets the Height and Width back to their starting values. Finally, the PointerExited event handler also sets the Height and Width back to their starting value.

private void TestRectangle_PointerPressed(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the size of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

private void TestRectangle_PointerReleased(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

private void TestRectangle_PointerExited(object sender, 
    PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Finger moved out of Rectangle before the pointer exited event.
    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

Using manipulation events

If you need to support multiple finger interactions in your app, or interactions that use velocity data, then you'll need to use the manipulation events. You can use manipulation events to detect interactions such as drag, pinch, and hold. The following table lists the manipulation events and classes in Windows Store apps using C++, C#, or Visual Basic.

An gesture in a Windows Store app using C++, C#, or Visual Basic consists of a series of manipulation events. Each gesture starts with a ManipulationStarted event, such as when a user touches the screen. Next, one or more ManipulationDelta events are fired. For example, if you touch the screen and then drag your finger across the screen, a number of ManipulationDelta events are fired. Finally, a ManipulationCompleted event is raised when the interaction is finished.

Note  If you don't have a touch-screen monitor, you can test your manipulation event code in the simulator using a mouse and mouse wheel interface.

The following example shows how to use the ManipulationDelta events to handle a drag interaction. The sample creates a Rectangle that can be dragged across the screen.

First, a Rectangle named TestRectangle is created in XAML with a Height and Width of 200.

<Rectangle Name="TestRectangle"
  Width="200" Height="200" Fill="Blue" 
  ManipulationMode="All"/>

Next, a global TranslateTransform named dragTranslation is created for translating the Rectangle. An event handler is added to the Rectangle to handle the ManipulationDelta event, and dragTranslation is added to the RenderTransform of the Rectangle. Finally, in the ManipulationDelta event handler, the position of the Rectangle is updated by using the TranslateTransform on the Delta property.

// Global Transform used to change the position of the Rectangle.
private TranslateTransform dragTranslation;

// Constructor
public MainPage()
{
    InitializeComponent();

    // Add handler for the ManipulationDelta event
    TestRectangle.ManipulationDelta += Drag_ManipulationDelta;
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}

void Drag_ManipulationDelta(object sender, 
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

UI design and touch input

How you design your user interface can influence how easy your app is to use with touch input. To ensure that your app is touch optimized, follow these guidelines:

• Be sure to accommodate the size difference between mouse pointers and fingertips. Touch requires larger UI elements to ensure accuracy and to prevent fingers from obscuring important information.
• Always provide immediate, direct visual feedback for touch interactions. For example, you can use highlighting or tool tips to indicate the current touch target and prevent the accidental activation of other targets.
• Use physics effects such as acceleration and inertia to provide a natural feel in interactions such as panning.
• Use snap points and other constraints to help guide users to the most useful states.

For additional user experience design guidelines related to touch, see Guidelines for user interaction.

Related topics

Roadmap for creating apps using C#, C++, or VB

Input sample

Build date: 11/29/2012