信息
您所需的主题如下所示。但此主题未包含在此库中。

快速入门:Windows Phone 8 的触控输入

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone 设备带有多点触控屏幕,使用户能够同时用多个手指作出类似点按、轻拂或捏合等输入手势。Windows Phone 具有多个用于处理各种不同的触控输入的机制。本快速入门介绍了在 Windows Phone 应用中使用触控输入的基本知识。

本主题包括以下部分。

Windows Phone 将触控用于大部分用户输入.Windows Phone 支持多点触控屏幕,使用户能够使用自然手势与手机进行交互。向应用添加触控和手势支持可以显著增强用户体验。对于处理 Windows Phone 应用中的触控输入,您拥有多种选择。

  • 鼠标事件。鼠标事件可以检测简单的单指手势,如点按和连按。您可以快速将鼠标事件处理程序添加到应用,并且可以使用它们轻松获取基本的触控支持。

  • 操作事件。 您可以使用类似 ManipulationStartedManipulationDelta 的操作事件来处理复杂的手势,如多点触控手势和使用惯性与速度数据的手势。

  • 低级别触控事件。 TouchPoint 类是另一种处理 Windows Phone 中的触摸输入的方法。TouchPoint 是较低级别的输入系统,在本快速入门中不作介绍。

  • 手势类。 在手机上处理触控和手势的第四种方法是使用 Windows Phone Toolkit 中的 GestureServiceGestureListener 类。您可以从 Codeplex 上的工具包网站上下载该工具包。该工具包是开放源项目,而且不是 Windows Phone 的核心部分。

手势是将触控输入数据解释为一组常用动作(如点按、轻拂和捏合)的高级方式。下表介绍了 Windows Phone 中的一些常用手势。

手势

描述

点按

手指触摸屏幕,然后释放。

连按

手指点按屏幕两次,然后松开。

长按

手指触摸屏幕,并保持短暂停留。

拖动

手指触摸屏幕,并向任何方向移动。

轻拂

手指在屏幕上滑动,且不停止即抬起。

捏合

两个手指在屏幕上点按并移动。

您可以使用 Windows Phone 鼠标事件,如 MouseLeftButtonUpMouseMove 来支持简单的单指手势(如点按)。

必须对多点触控手势(如捏合)和使用惯性与速度数据的手势(如轻拂)使用操作事件。操作事件提供的信息并非是所执行的手势的形式,而是触控数据,如位置、转换增量和速度。这些触控数据可帮助确定所使用手势的类型。Windows Phone 开发人员负责将这些信息转换为等效手势。但是,Windows Phone Toolkit 通过 GestureService 和 GestureListner 类提供手势支持。

在 Windows Phone 应用中启用触控输入的最简单的方法是使用鼠标事件。鼠标事件局限于单指手势,如点按和连按,而且不支持基于速度的手势。屏幕上的单指触碰会转换为等效的 Windows Phone 鼠标事件,例如:将手指放置在屏幕上时,会转换为 MouseLeftButtonDown;抬起手指时,会转换为 MouseLeftButtonUp;在屏幕上拖动手指时则转换为 MouseMove。Windows Phone 使用的其他鼠标事件有 MouseLeaveMouseEnter。鼠标事件的事件参数是 MouseButtonEventArgsButton 类上的 Click 事件是另一种为按钮上的点按手势添加支持的简单方法。

以下示例演示如何在 Rectangle 对象上使用 MouseLeftButtonDownMouseLeftButtonUpMouseLeave 事件处理点按手势。

首先,在 XAML 中创建名为 TestRectangleRectangle,并且为 MouseLeftButtonDownMouseLeftButtonUpMouseLeave 事件添加事件处理程序。

<Rectangle Name="TestRectangle"
    Height="100"
    Width="200"
    Fill="Blue"
    MouseLeftButtonDown="Tap_LeftButtonDown"
    MouseLeftButtonUp="Tap_LeftButtonUp"
    MouseLeave="Tap_MouseLeave" />

接着,为鼠标事件创建事件处理程序。MouseLeftButtonDown 事件处理程序增加了 RectangleHeightWidthMouseLeftButtonUp 事件处理程序将 HeightWidth 重新设置为它们的起始值。最后,MouseLeave 事件处理程序也将 HeightWidth 重新设置为它们的起始值。

private void Tap_LeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Change the size of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}
private void Tap_LeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
private void Tap_MouseLeave(object sender, MouseEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    // Finger moved out of Rectangle before the mouse up event.
    // Reset the dimensions on the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

下图演示了该示例。

Touch input mouse events

下一个示例演示如何使用 Button 上的 Click 事件处理点按手势。

首先,在 XAML 中创建 Button,并为 Click 事件添加事件处理程序。

<Button Name="TestButton"
    Content="Tap"
    Height="100" Width="200"
    Click="TestButton_Click" />

Click 事件处理程序中,按钮的内容在“点按”和“再次点按!”之间切换。用户每次点按按钮,文本都发生变化。

private void TestButton_Click(object sender, RoutedEventArgs e)
{
    Button button = sender as Button;
    if (null != button)
    {
        // Toggle Button.Conten between "Tap" and "Tap Again!"
        if (button.Content as string == "Tap")
        {
            button.Content = "Tap Again!";
        }
        else
        {
            button.Content = "Tap";
        }
    }
}

下图演示了该示例。

Touch input mouse events

若要在 Windows Phone 应用中支持多个手指作出的手势或使用速度数据的手势,则需要使用操作事件。可使用操作事件检测轻拂、拖动、捏合和长按等手势。下表列出了 Windows Phone 中的操作事件和类。

事件/类

描述

ManipulationStarted 事件

当输入设备对 UIElement 开始操作时发生。

ManipulationDelta 事件

当输入设备在操作期间更改位置时发生。

ManipulationCompleted 事件

对于 UIElement 的操作和延时完毕时发生。

ManipulationStartedEventArgs

ManipulationStarted 事件提供数据。

ManipulationDeltaEventArgs

ManipulationDelta 事件提供数据。

ManipulationVelocities

描述操作发生的速度。

ManipulationCompletedEventArgs

ManipulationCompleted 事件提供数据。

Windows Phone 中的手势事件由一系列操作事件组成。每一个手势都从 ManipulationStarted 事件开始,如用户触摸屏幕时。接着,引发一个或多个 ManipulationDelta 事件。例如,若先触摸屏幕然后在屏幕上拖动手指,则会引发多个 ManipulationDelta 事件。最后,当手势完成时,引发 ManipulationCompleted 事件。

如果您正使用 Windows Phone 模拟器 测试操作事件代码,而且您没有触摸屏显示器,那么您可以测试的内容是有限的。模拟器不支持利用鼠标的多点触控手势。但是您可以测试转换,如以下示例所示。

以下示例演示如何使用 ManipulationDelta 事件处理拖动手势。该示例创建可以在屏幕上拖动的 Rectangle

首先,使用 200HeightWidth 在 XAML 中创建名为 TestRectangleRectangle

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

其次,创建名为 dragTranslation 的全局 TranslateTransform,以转换 Rectangle。向 Rectangle 添加事件处理程序以处理 ManipulationDelta 事件,并向 RectangleRenderTransform 添加 dragTranslation。最后,在 ManipulationDelta 事件处理程序中,使用 DeltaManipulation 属性上的 TranslateTransform 更新 Rectangle 的位置。

// 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 +=
    new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);
    dragTranslation = new TranslateTransform();
    TestRectangle.RenderTransform = this.dragTranslation;
}
void Drag_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.DeltaManipulation.Translation.X;
    dragTranslation.Y += e.DeltaManipulation.Translation.Y;
}

下图演示了该示例。

Touch input manipulation events

用户界面的设计方式会影响应用的触控输入的使用难易度。Windows Phone 的Windows Phone 设计库探讨了在应用中使用触控输入的最佳做法。尤其是,请查阅 Windows Phone 导航、方向和手势Windows Phone 交互和可用性。这些内容很有用,值得一读;下面是与触控和 UI 设计相关的几个要点:

  • 应用中的所有简单命令应通过单指完成。

  • 触控控件应立即响应。在用户触摸屏幕和控件作出响应之间,即使有轻微延隔,也会变得明显,会影响用户体验。

  • 提供即时视觉或听觉反馈。

  • 如果操作所需的时间较长,则考虑提供增量反馈。

  • 触控目标不应小于 9 mm 或 34 像素。

  • 在少数情况下,控件可以更小,但不应小于 7 mm 或 26 像素的正方形。

  • 对于经常使用的触控控件,则考虑使之大于 9 mm。

  • 应在可触控控件之间提供 2 mm 或 8 像素。

  • 触控对象可以大于但不应小于触控元素。

  • 触控元素不应比触控目标小超过 60%。

  • 长方形控件在纵向显示的 UI 中更容易点中。

显示: