快速入门：触摸输入（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用）

原文 http://technet.microsoft.com/zh-cn/subscriptions/hh465387

快速入门：触摸输入（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用）

 

Windows 8 设备通常具有多点触摸屏幕，从而用户可以同时使用多个手指来进行不同的输入交互，如点击、拖动或收缩。Windows 运行时具有多种处理触控输入的不同机制，从而你可以创建用户能够放心浏览的沉浸式体验。 本快速入门包含在采用 C++、C# 或 Visual Basic 的 Windows 应用商店应用中使用触控输入的基本知识。有关更多的代码示例，请参阅输入示例。

路线图： 本主题与其他主题有何关联？请参阅：

• 采用 C# 或 Visual Basic 的 Windows 应用商店应用的路线图
• 采用 C++ 的 Windows 应用商店应用的路线图

先决条件

本主题假定你可以使用 C++、C# 或 Visual Basic 创建基本的 Windows 应用商店应用。有关创建你的第一个 Windows 应用商店应用的说明，请参阅使用 C++、C# 或 Visual Basic 创建你的第一个 Windows 应用商店应用。

用户体验指南（最佳实践）

尽管本主题包含触摸实现的某些基本知识，但对于特定的触摸方案，你还应该记住很多用户体验指南。请参阅以下内容获取详细信息：

• 用户交互指南
• 十字滑块指南
• 视觉缩放和调整大小指南
• 平移指南
• 旋转指南
• 语义式缩放指南
• 选择文本和图像的指南
• 目标指南
• 视觉反馈指南

触控输入简介

很多 Windows 8 设备都使用触摸作为主要用户输入。Windows 8 支持多点触摸屏幕，从而用户可以使用自然交互与设备进行交互。向应用中添加触摸和交互支持可以大大改进用户体验。但是，你应该仔细设计触摸支持，以确保你 的用户可以放心浏览你的应用。此外，尽管进行了触摸优化，你还必须确保你的应用能够适应传统的鼠标和键盘输入。

你可以使用多种不同的方法在使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用中处理触摸输入。 内置的控件库提供使用标准交互、动画物理效果以及视觉反馈的默认触摸、鼠标和键盘支持。

如果你不需要自定义的触摸支持，则可以使用该框架提供的触摸支持并遵循触摸优化的几个简单准则，如本快速入门指南的后面部分所述。

你可以实现自己的触摸和交互支持，但要记住，用户期望获得直观的体验，包括直接与应用的元素交互。 你应该在内置支持上建立自定义触摸支持的模型，以便使内容简单，而且更容易发现。此外，你还应该为所有交互提供即时视觉反馈，以避免用户不确定性并鼓励用户探究。

若要提供自定义触摸支持，则可以处理分组到三个不同抽象级别的 UIElement 事件。高级事件（如 Tapped）可用于响应简单交互。指针事件提供较低级别的详细信息，如指针动作以及区分按压和释放手势。操作事件提供较低级别的详细信息，如手势速度和延迟以及多点触摸数据。这些事件自动支持触摸和鼠标输入，但必要时也提供信息以便让你区分实际输入设备。

手势

手势是将触摸输入数据解释为一组常见运动（如点击、滑动和收缩）的高级方法。Windows 8 中使用的常见手势包括：

交互	描述
点击	用一个手指触摸屏幕，然后抬起手指。
长按	用一个手指触摸屏幕并保持不动。
滑动	用一个或多个手指触摸屏幕并向着同一方向移动。
轻扫	用一个或多个手指触摸屏幕并向着同一方向移动较短距离。
收缩	用两个或多个手指触摸屏幕，然后将手指并拢在一起或分开。
旋转	用两个或多个手指触摸屏幕并沿着顺时针或逆时针的弧线移动。
拉伸	用两个或多个手指触摸屏幕，然后将手指分开。

 

你可以通过处理较高级别的事件（如 Tapped、DoubleTapped、RightTapped 和 Holding）来响应简单的触摸和鼠标手势。你也可以将 IsTapEnabled、IsDoubleTapEnabled、IsRightTapEnabled 和 IsHoldingEnabled 设置为 false，以便为特定元素禁用这些手势。

指针事件（如 PointerMoved）可用于支持一个手指的简单交互，如滑动。

对于多点触摸交互（例如收缩）和使用惯性和速度数据的交互（例如拖动），需要使用操作事件。操作事件提供信息的形式并不是要执行的交互，而是触摸数据（例如位置、转换三角和速度）。你可以使用此触摸数据来确定要执行的交互类型。但是，你需要将该信息转换成等效的交互。

使用指针事件

指针事件自动支持触摸和鼠标输入，并替换更多的传统鼠标事件。

基于触摸的指针事件仅限于一个手指的交互，如点击和滑动，并且它们不支持基于速度的交互。屏幕上一个手指的触摸会转换为同等的 Windows 运行时指针事件，如将手指放在屏幕上时的 PointerPressed、抬起手指时的 PointerReleased 以及在屏幕上拖动手指时的 PointerMoved。使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用使用的其他指针事件为 PointerExited 和 PointerEntered。指针事件的事件参数为 PointerRoutedEventArgs。

以下示例显示如何使用 PointerPressed、PointerReleased 和 PointerExited 事件来处理 Rectangle 对象上的点击交互。

首先，采用 XAML 创建名为 TestRectangle 的 Rectangle 并为 PointerPressed、PointerReleased 和 PointerExited 事件添加事件处理程序。

XAML

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

接下来，创建指针事件的事件处理程序。PointerPressed 事件处理程序增加 Rectangle 的 Height 和 Width。PointerReleased 事件处理程序将 Height 和 Width 重新设置为起始值。最后，PointerExited 事件处理程序还将 Height 和 Width 重新设置为起始值。

VB

C#

C++

F#

JScript

PowerShell

Private Sub TestRectangle_PointerPressed(ByVal sender As Object, 
    ByVal e As PointerRoutedEventArgs)

    Dim rect As Rectangle = CType(sender,Rectangle)

    ' Change the size of the Rectangle.
    If (Not (rect) Is Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If

End Sub
 
Private Sub TestRectangle_PointerReleased(ByVal sender As Object, 
    ByVal e As PointerRoutedEventArgs)

    Dim rect As Rectangle = CType(sender,Rectangle)

    ' Reset the dimensions on the Rectangle.
    If ((rect) IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If

End Sub
 
Private Sub TestRectangle_PointerExited(ByVal sender As Object, 
    ByVal e As PointerRoutedEventArgs)

    Dim rect As Rectangle = CType(sender,Rectangle)

    ' Finger moved out of Rectangle before the pointer exited event.
    ' Reset the dimensions on the Rectangle.
    If (Not (rect) Is Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If

End Sub

使用操作事件

如果你需要在应用中支持多个手指交互或使用速度数据的交互，则需要使用操作事件。你可以操作事件来检测诸如拖动、收缩和按住之类的交互。下表列出了使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用中的操作事件和类。

事件或类	描述
ManipulationStarting event	首次创建操作处理器时发生。
ManipulationStarted event	当输入设备在 UIElement 上开始操作时发生。
ManipulationDelta event	当输入设备在操作期间更改位置时发生。
ManipulationInertiaStarting	在操作过程中，当延迟开始时，如果输入设备与 UIElement 对象失去联系，则会发生。
ManipulationCompleted event	当 UIElement 上的操作和延迟完成时发生。
ManipulationStartingRoutedEventArgs	提供 ManipulationStarting 事件的数据。
ManipulationStartedRoutedEventArgs	提供 ManipulationStarted 事件的数据。
ManipulationDeltaRoutedEventArgs	提供 ManipulationDelta 事件的数据。
ManipulationInertiaStartingRoutedEventArgs	提供 ManipulationInertiaStarting 事件的数据。
ManipulationVelocities	描述操作发生的速度。
ManipulationCompletedRoutedEventArgs	提供 ManipulationCompleted 事件的数据。

 

使用 C++、C# 或 Visual Basic 的 Windows 应用商店应用中的手势由一系列操作事件组成。每个手势都从 ManipulationStarted 事件开始，如用户触摸屏幕时。接下来，引发一个或多个 ManipulationDelta 事件。例如，如果触摸屏幕，然后在屏幕上拖动手指，则会引发多个 ManipulationDelta 事件。最后，完成交互时引发 ManipulationCompleted 事件。

Note  如果你没有触摸屏监视器，则可以使用鼠标和鼠标滚轮界面在模拟器中测试你的操作事件代码。

以下示例显示如何使用 ManipulationDelta 事件来处理拖动交互。该示例创建可以在屏幕上拖动的 Rectangle。

首先，采用 XAML 格式创建一个名为 TestRectangle 的 Rectangle，其中包含 200 个 Height 和 Width。

XAML

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

接下来，创建一个名为 dragTranslation 的全局 TranslateTransform，用于转换 Rectangle。向 Rectangle 中添加一个事件处理程序，以处理 ManipulationDelta 事件，并向 Rectangle 的 RenderTransform 中添加 dragTranslation。最后，在 ManipulationDelta 事件处理程序中，使用 Delta 属性上的 TranslateTransform 更新 Rectangle 的位置。

VB

C#

C++

F#

JScript

PowerShell

' Global Transform used to change the position of the Rectangle.
Dim dragTranslation As TranslateTransform

' Constructor
Public Sub New()

    InitializeComponent()

    ' Add handler for the ManipulationDelta event
    AddHandler TestRectangle.ManipulationDelta, 
        AddressOf Me.Drag_ManipulationDelta
    dragTranslation = New TranslateTransform
    TestRectangle.RenderTransform = Me.dragTranslation

End Sub

Private Sub Drag_ManipulationDelta(ByVal sender As Object, 
    ByVal e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

UI 设计和触控输入

设计用户界面的方法可影响通过触控输入使用应用的难易程度。为了确保你的应用经过了触摸优化，请遵循下列指南：

• 请务必调整鼠标指针和指尖之间的大小差异。触摸要求更大的 UI 元素以确保准确性，并防止手指遮住重要的信息。
• 请始终为触摸交互提供即时、直接的视觉反馈。例如，你可以使用突出显示或工具提示来指示当前的触摸目标，防止意外激活其他目标。
• 使用各种物理效果，如加速和惯性来在交互（如移动）中提供自然的感觉。
• 使用捕捉点和其他限制来帮助将用户引导到最有用的状态。

有关与触摸相关的其他用户体验设计指南，请参阅用户交互指南。