Chapter 11. Touch

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 11. Touch

In This Chapter

• Using mouse events for tap and double tap gestures

• Understanding how touch events are promoted to mouse events

• Registering for touch notifications using the Touch.FrameReported event

• Using manipulation events to consolidate touch input from multiple fingers

• Using a RenderTransform to move, resize, and rotate a UIElement via touch

• Animating an element in response to a flick gesture

• Best practices when designing touch friendly interfaces

Windows Phone devices come equipped with capacitive touch screens that offer a smooth, accurate, multitouch enabled experience. By adding touch and gesture support to your apps, you can greatly enhance user experience.

You can handle touch input in your Silverlight for Windows Phone app in a number of ways, including the following:

• Mouse events

• TouchPoint class

• Manipulation events

• UIElement gesture events

• Silverlight Toolkit for Windows Phone gestures

Mouse events are an easy way to get basic touch support, and allow you to detect simple, one-finger gestures such as tap and double tap.

The TouchPoint class provides a low-level input system that you can use to respond to all touch activity in the UI. The TouchPoint class is used by the higher-level touch input systems.

Manipulation events are UIElement events used to handle more complex gestures, such as multitouch gestures and gestures that use inertia and velocity data.

UIElement and Toolkit gestures further consolidate the low-level touch API into a set of gesture-specific events and make it easy to handle complex single and multitouch gestures.

This chapter explores each of these four approaches in detail. The chapter presents an example app demonstrating how to move, resize, rotate, and animate a UIElement using gestures and concludes by looking at the best practices for optimizing your user interfaces for touch input.

Note

The Windows Phone Emulator does not support multitouch input using the mouse, therefore multitouch apps must be tested on a development computer that supports touch input, or on an actual phone device.

Handling Touch with Mouse Events

Silverlight mouse events can be used to detect a simple, one-finger gesture. Mouse event handlers can be quickly added to your app and provide an easy way to get basic touch support.

For more complex gestures, additional code is required to translate manipulation values to detect the actual gesture type. As you see in later sections of this chapter, there are easier higher-level APIs for handling more complex gestures.

In this chapter, the term touch point is used to describe the point of contact between a finger and the device screen.

The UIElement class includes the following mouse events:

• MouseEnter—Raised when a touch point enters the bounding area of a UIElement.

• MouseLeave—Raised when the user taps and moves his finger outside the bounding area of the UIElement.

• MouseLeftButtonDown—Raised when the user touches a UIElement.

• MouseLeftButtonUp—Raised when a touch point is removed from the screen while it is over a UIElement (or while a UIElement holds mouse capture).

• MouseMove—Raised when the coordinate position of the touch point changes while over a UIElement (or while a UIElement holds mouse capture).

• MouseWheel—This event is unutilized on a touch-driven UI.

The following example responds to the MouseLeftButtonDown, MouseLeftButtonUp, and MouseLeave events to change the background color of a Border control. See the following excerpt from the MouseEventsView.xaml file:

The event handlers in the code-beside change the color of the Border (see Listing 11.1).

Listing 11.1. MouseEventsView Class

public partial class MouseEventsView : PhoneApplicationPage
{
    readonly SolidColorBrush dragBrush = new SolidColorBrush(Colors.Orange);
    readonly SolidColorBrush normalBrush;

    public MouseEventsView()
    {
        InitializeComponent();

        normalBrush = (SolidColorBrush)Resources["PhoneAccentBrush"];
    }

    void HandleLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Border border = (Border)sender;
        border.Background = dragBrush;
    }

    void HandleLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Border border = (Border)sender;
        border.Background = normalBrush;
    }

    void HandleMouseLeave(object sender, MouseEventArgs e)
    {
        Border border = (Border)sender;
        border.Background = normalBrush;
    }
}

The MouseButtonEventArgs class derives from MouseEventArgs. MouseEventArgs is a RoutedEvent, which is discussed in more detail later in this chapter.

While mouse events provide a simple way to respond to touch in your app, they do not come equipped to support complex gestures or multitouch, nor do they provide any built-in means for ascertaining more detailed touch information, such as touch velocity.

Fortunately, as you see later in the chapter, a number of alternative touch APIs do just that. For now though, turn your attention to the Touch and TouchPoint classes that represent the low-level touch API.

Touch and TouchPoint Classes

The low-level interface for touch in Silverlight is the TouchPoint class. Unlike mouse events, the TouchPoint class is designed exclusively for touch without a pointing device in mind. A TouchPoint instance represents a finger touching the screen.

TouchPoint has four read-only properties, described in the following list:

• Action—Represents the type of manipulation and can have one of the three following values:

• Down—Indicates that the user has made contact with the screen.

• Move—Indicates that the touch point has changed position.

• Up—Indicates that the touch point has been removed.

• Position—Retrieves the X and Y coordinate position of the touch point, as a System.Windows.Point. This point is relative to the top-left corner of the element beneath the touch point.

• Size—This is supposed to get the rectangular area that is reported as the touch-point contact area. The value reported on Windows Phone, however, always has a width and height of 1, making it of no use on the phone.

• TouchDevice—Retrieves the specific device type that produced the touch point. This property allows you to retrieve the UIElement beneath the touch point via its TouchDevice.DirectlyOver property. The TouchDevice.Id property allows you to distinguish between fingers touching the display.

The Touch class is an application-level service used to register for touch events. It contains a single public static member, the FrameReported event. This event is global for your app and is raised whenever a touch event occurs.

To register for touch notifications, you subscribe to the Touch.FrameReported event like so:

Touch.FrameReported += HandleFrameReported;

A handler for the FrameReported event accepts a TouchFrameEventArgs argument, as shown:

void HandleFrameReported(object sender, TouchFrameEventArgs args)
{
.../* method body */
}

A frame is a time slice where one or more touch events have occurred. When the FrameReported event is raised, there may be up to four TouchPoint objects.

TouchFrameEventArgs contains four public members, which are described in the following list:

• TimeStamp property—An int value that indicates when the touch event occurred.

• GetPrimaryTouchPoint(UIElement relativeTo)—Retrieves the TouchPoint representing the first finger that touched the screen. A UIElement can be specified to make the TouchPoint object’s Position property relative to that element. If a UIElement is not specified (it is null), then the returned TouchPoint is relative to the top left of the page.

• GetTouchPoints(UIElement relativeTo)—Retrieves the collection of TouchPoints for the frame. The UIElement parameter works the same as the GetPrimaryTouchPoint. The parameter does not restrict the set of TouchPoints returned; all are returned and only the Position of each TouchPoint is affected.

• SuspendMousePromotionUntilTouchUp()—Prevents touch events from turning into mouse events. See the following section for a more detailed explanation.

Mouse Event Promotion

With the advent of Windows Phone, Silverlight has transitioned from being a browser and desktop only technology with a primarily mouse-driven UI, to a mobile device technology with a touch-driven UI.

To allow controls that were originally designed to work with mouse events to continue to function, the touch system was engineered so that touch events are automatically turned into (promoted to) mouse events. If a touch event is not suspended using the SuspendMousePromotionUntilTouchUp method, then mouse events are automatically raised.

Note

Promotion of a TouchPoint to a mouse event only occurs with the primary touch point.

To prevent a touch event from being promoted to a mouse event, call the SuspendMousePromotionUntilTouchUp within the FrameReported event handler, like so:

void HandleFrameReported(object sender, TouchFrameEventArgs e)
{
    TouchPoint primaryTouchPoint = e.GetPrimaryTouchPoint(null);
    if (primaryTouchPoint != null
        && primaryTouchPoint.Action == TouchAction.Down)
    {
        e.SuspendMousePromotionUntilTouchUp();
        /* custom code */
    }
}

Note

The SuspendMousePromotionUntilTouchUp method can be called only when the TouchPoint.Action property is equal to TouchAction.Down, or else an InvalidOperationException is raised.

In most cases, calling SuspendMousePromotionUntilTouchUp is something you should avoid, because doing so prevents the functioning of any controls that rely solely on mouse events and those that have not been built using the touch-specific API.

Handling the Touch.FrameReported Event

The following example shows how to change the color of a Border control by responding to the Touch.FrameReported event. Within the TouchPointView XAML file is a named Border control as shown:

The code-beside file, TouchPointView.xaml.cs, subscribes to the Touch.FrameReported event within the page constructor. The event handler retrieves the primary touch point, and if the TouchPoint is above the Border, then the Border object’s Background is switched (see Listing 11.2).

Listing 11.2. TouchPointView Class

public partial class TouchPointView : PhoneApplicationPage
{
    readonly SolidColorBrush directlyOverBrush
                = new SolidColorBrush(Colors.Orange);
    readonly Brush normalBrush;

    public TouchPointView()
    {
        InitializeComponent();

        normalBrush = border.Background;

        Touch.FrameReported += HandleFrameReported;
    }

    void HandleFrameReported(object sender, TouchFrameEventArgs e)
    {
        TouchPoint primaryTouchPoint = e.GetPrimaryTouchPoint(null);
        if (primaryTouchPoint == null
            | | primaryTouchPoint.TouchDevice.DirectlyOver != border)
        {
            return;
        }

        if (primaryTouchPoint.Action == TouchAction.Down)
        {            border.Background = directlyOverBrush;
        }
        else
        {
            border.Background = normalBrush;
        }
    }
}

Using the Touch and TouchPoint API provides you with the ability to respond to touch at a very low level. Subsequent sections of this chapter look at two higher level abstractions of the Touch and TouchPoint APIs, namely manipulation events and the Silverlight Toolkit for Windows Phone, beginning with manipulation events.

Manipulation Events

Manipulation events consolidate the touch activities of one or two fingers. Manipulation events combine individual touch point information, provided by the Touch.FrameReported event, and interpret them into a higher-level API with velocity, scaling, and translation information.

Moreover, unlike the Touch.FrameReported event, which provides touch notifications for your entire interface, a manipulation event is specific to the UIElement to which it is associated.

The manipulation events comprise three UIElement events, which are described in the following list:

• ManipulationStarted—Raised when the user touches the UIElement.

• ManipulationDelta—Raised when a second touch point is placed on the element, and when a touch input changes position. This event can occur multiple times during a manipulation. For example, if the user drags a finger across the screen, the ManipulationDelta event occurs multiple times during the finger’s movement.

• ManipulationCompleted—Raised when the user’s finger, or fingers, leaves the UIElement, and when any inertia applied to the element is complete.

These three events are routed events (they subclass the RoutedEvent class). In case you are not familiar with routed events, a RoutedEvent can be handled by an ancestor element in the visual tree. RoutedEvents bubble upwards through the visual tree, until they are either handled, indicated by the Handled property of the event arguments, or reach the root element of the visual tree. This means that you can subscribe to a manipulation event at, for example, the page level, and it gives you the opportunity to handle manipulation events for all elements in the page.

As you might expect, a manipulation begins with the ManipulationStarted event, followed by zero or more ManipulationDelta events, and then a single ManipulationCompleted event.

The event arguments for all three manipulation events have the following shared properties:

• OriginalSource (provided by the RoutedEvent base class)—This is the object that raised the manipulation event.

• ManipulationContainer—This is the topmost enabled UIElement being touched. Touch points on different UIElements provide a separate succession of manipulation events and are distinguished by the ManipulationContainer property. The OriginalSource and ManipulationContainer properties are in most cases the same. Internally, ManipulationContainer is assigned to the OriginalSource property when a manipulation event is raised.

• ManipulationOrigin—This property, of type Point, indicates the location of the touch point relative to the top-left corner of the ManipulationContainer element. If two touch points exist on the element, then the ManipulationOrigin property indicates the middle position between the two points.

• Handled—A property of type bool that allows you to halt the bubbling of the routed event up the visual tree.

Handling Manipulation Events

When a manipulation begins, the ManipulationStarted event is raised. The event handler accepts a ManipulationStartedEventArgs parameter, as shown:

void HandleManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
/* method body */
}

Contrary to the low-level TouchPoint API, there is no need to store the id of the touch point to track its motion. In fact, the manipulation events do not offer individual touch point information. If you need that information, then the low-level TouchPoint API may be more suitable.

During manipulation, the ManipulationDelta event is raised when a touch point is added to the ManipulationContainer element, or when the position of a touch point on the element changes. The event handler accepts a ManipulationDeltaEventArgs parameter, as shown:

void HandleManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
/* method body */
}

ManipulationDeltaEventArgs provides you with the most recent and the accumulated manipulation data. The following is a list of its properties, which have not yet been covered:

• CumulativeManipulation—Gets the accumulated changes of the current manipulation, as a ManipulationDelta instance. ManipulationDelta has the following two properties:

• Scale—A Point indicating the horizontal and vertical scale amounts, relevant during multitouch manipulation.

• Translate—A Point indicating the horizontal and vertical positional offset.

• DeltaManipulation—Gets the most recent changes of the current manipulation, as a ManipulationDelta.

• IsInertial—Gets whether the ManipulationDelta event was raised while a finger had contact with the element. In my experience the value of this property is always false during the ManipulationDelta event. This property is of more use during handling of the ManipulationCompleted event, as you soon see.

• Velocities—Gets the rates of the most recent changes to the manipulation. This property is of type ManipulationVelocities, which is a class with the following two properties:

• ExpansionVelocity—Gets a Point representing the rate at which the manipulation was resized.

• LinearVelocity—Gets a Point representing the speed of the linear motion.

Inertia is applied automatically to a manipulation and is based on the velocity of the manipulation. Both the ManipulationCompletedEventArgs and ManipulationStartedEventArgs classes contain a Complete method, which allows you to forcibly finish the manipulation event sequence, which raises the ManipulationComplete event and prevents the application of inertia.

The ManipulationComplete event handler accepts a ManipulationCompletedEventArgs parameter, as shown:

void HandleManipulationCompleted(
object sender, ManipulationCompletedEventArgs e)
{
/* method body */
}

ManipulationCompletedEventArgs provides you with the final velocities and overall manipulation data. The following is a list of its properties, which have not yet been covered:

• FinalVelocities—Gets the final expansion and linear velocities for the manipulation.

• IsInertial—Gets whether the ManipulationDelta event occurred while a finger has contact with the element.

• IsInertial—Gets whether the ManipulationDelta event was raised while a finger had contact with the element. If the manipulation consisted of a single touch point it is indicative of a flick gesture.

• TotalManipulation—Gets a ManipulationDelta object containing two Points representing the total scale and translation values for the manipulation.

Manipulation Events Example

The following example illustrates how to move and scale a UIElement using the various manipulation events.

Within the ManipulationEventsView XAML file, there is a Border control defined as shown:

When the user touches the Border, the ManipulationStarted event is raised, calling the code-beside handler, which sets the background color of the Border. As the user moves her fingers, the ManipulationDelta event is raised repeatedly, each time the location and scale of the Border is adjusted using the CompositeTransform (see Listing 11.3).

Listing 11.3. ManipulationEventsView Class

public partial class ManipulationEventsView : PhoneApplicationPage
{
    readonly SolidColorBrush startManipulationBrush
                            = new SolidColorBrush(Colors.Orange);
    Brush normalBrush;

    public ManipulationEventsView()
    {
        InitializeComponent();
    }

    void HandleManipulationStarted(
            object sender, ManipulationStartedEventArgs e)
    {
        Border border = (Border)sender;
        normalBrush = border.Background;
        border.Background = startManipulationBrush;
    }

    void HandleManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        compositeTransform.TranslateX += e.DeltaManipulation.Translation.X;
        compositeTransform.TranslateY += e.DeltaManipulation.Translation.Y;

        if (e.DeltaManipulation.Scale.X > 0
            && e.DeltaManipulation.Scale.X > 0)
        {
            compositeTransform.ScaleX *= e.DeltaManipulation.Scale.X;
            compositeTransform.ScaleY *= e.DeltaManipulation.Scale.Y;
        }
    }

    void HandleManipulationCompleted(
                object sender, ManipulationCompletedEventArgs e)
    {
        Border border = (Border)sender;
        border.Background = normalBrush;
        TextBlock_Message.Text = string.Empty;
    }
}

Pinching or stretching the Border modifies the CompositeTransform scale values, which resizes the control. A tap and drag gesture modifies the CompositeTransform translation values, which repositions the control (see Figure 11.1).

Figure 11.1. A Border is moved and resized in response to manipulation events.

UIElement Touch Gesture Events

Gestures are a high-level way of interpreting touch input data and include a set of common motions, such as tapping, flicking, and pinching. Controls, such as the WebBrowser, handle gestures such as the pinch gesture internally, allowing the user to pan and zoom in and out of content. By responding to gestures you can provide a natural and immersive experience for your users.

Support for basic single touch gestures has been incorporated into the Silverlight for Windows Phone SDK. Support for more complex gestures is provided by the Silverlight for Windows Phone Toolkit, discussed in the next section.

The sample code for this section is located in the UIElementTouchEventsView.xaml and UIElementTouchEventsView.xaml.cs files, in the Touch directory of the WindowsPhone7Unleashed.Examples project.

The UIElement class comes equipped to handle the following three touch gestures:

• Tap

• Double tap

• Hold

The UIElement includes three corresponding routed events: Tap, DoubleTap, and Hold.

The three tap events can be subscribed to in XAML, as the following excerpt demonstrates:

Figure 11.2 shows the sample page responding to the double tap gesture.

Figure 11.2. UIElementTouchEventsView page

Event handlers for all three events share the same signature and accept a GestureEventArgs object. GestureEventArgs contains a Boolean Handled property, which allows you to stop the event from continuing to bubble up the visual tree, and a GetPosition method that allows you to retrieve the location coordinates of where the touch occurred.

Each tap gesture supported by UIElement is examined in the following sections.

Tap Gesture

The simplest of all the gestures, a tap occurs when a finger touches the screen momentarily (see Figure 11.3).

Figure 11.3. Tap gesture

This gesture is analogous to a single-click performed with a mouse. The tap gesture can be broken down into the following two parts:

• Finger down provides touch indication.

• Finger up executes the action.

The Tap event is raised when the user performs a tap gesture. If the user’s finger remains in contact with the display for longer than one second, the tap event is not raised.

An event handler for the Tap event is shown in the following excerpt:

void HandleTap(object sender, GestureEventArgs e)
{
textBlock.Text = "tap";
}

Double Tap Gesture

The double tap gesture occurs when a finger quickly touches the screen twice (see Figure 11.4). This gesture is analogous to a double-click performed with a mouse.

Figure 11.4. Double tap gesture

The double tap is primarily designed to be used to toggle between the in and out zoom states of a control.

An event handler for the DoubleTap event is shown in the following excerpt:

void HandleDoubleTap(object sender, GestureEventArgs e)
{
textBlock.Text = "double tap";
}

Hold Gesture

The hold gesture is performed by touching the screen while continuing contact for a period of time (see Figure 11.5).

Figure 11.5. Hold gesture

The UIElement.Hold event is raised when the user touches the screen for one second.

An event handler for the Hold event is shown in the following excerpt:

void HandleHold(object sender, GestureEventArgs e)
{
textBlock.Text = "hold";
}

As an aside, the UIElement Hold event is used by the Silverlight Toolkit’s ContextMenu component. When used in this way, the hold gesture mimics the right-click of a mouse.

Note

UIElement and Silverlight Toolkit gesture events (discussed in the next section) are raised only if the UIElement is detected beneath the touch point. Make sure that the Background property of the UIElement is not null. If a background is not defined, touch events pass through the host control, and gestures are not detected. To achieve a see-through background, while still maintaining gesture support, set the background property of the UIElement to Transparent.

Silverlight Toolkit Gestures

Silverlight for Windows Phone Toolkit, introduced in Chapter 9, “Silverlight Toolkit Controls,” abstracts low-level touch events and further consolidates touch event data into a set of events representing the various single and multitouch gesture types.

Toolkit gestures harness the Touch.FrameReported event (described in the previous section “Touch and TouchPoint Classes”) to provide high-level gesture information.

Unless you require low-level touch point data, UIElement and Toolkit gestures are the recommended way to add single and multitouch capabilities to your apps.

Note

There is some overlap between the UIElement touch gesture events and the Toolkit gestures API; both allow you to handle tap, double tap, and hold gestures.

The first release of the Windows Phone SDK did not include baked-in support for these three gestures, and they were subsequently added with the 7.1 release of the SDK. In the meantime, the Toolkit had already included gesture support, so the presence of these gestures in the Toolkit remains as somewhat of a legacy feature. It is therefore recommended that you use the UIElement touch gesture events, rather than the Toolkit gesture API, for the tap, double tap, and hold gestures.

Getting Started with Toolkit Gestures

Unlike the other techniques seen in this chapter, Toolkit gestures are provided as a separate assembly, as part of the Silverlight for Windows Phone Toolkit package.

You can obtain the Silverlight for Windows Phone Toolkit from the Toolkit website on CodePlex (http://silverlight.codeplex.com/). See Chapter 9 for more information.

The two main classes for working with Toolkit gestures are the GestureService and GestureListener classes. GestureService is used only to attach a GestureListener to a UIElement. Like manipulation events, Toolkit gestures are used in conjunction with a UIElement. Once attached, the GestureListener monitors the element for gestures that the element can support, such as tap, hold, pinch, and flick.

GestureListener allows you to specify handlers for each gesture type. The following example shows a Border control with subscriptions to these events via the attached GestureListener:

The GestureListener class is designed for Silverlight’s event-driven model. The class effectively wraps the low-level Silverlight touch mechanism to perform automatic conversion of the Touch.FrameReported events into unique Silverlight events for each gesture type.

GestureListener Events in Detail

This section looks at each gesture and the events that correspond to each.