[翻译]WP7 QuickStart-第九篇-触控输入

[翻译]WP7 QuickStart-第九篇-触控输入

 

原文地址：http://create.msdn.com/en-US/education/quickstarts/Touch_Input

 

【译者注:这篇文章是翻译自微软官方的WP7 QuickStart的第九篇，讲述WP下的触控输入。部分内容加入了自己的理解和表达习惯。而翻译此系列的主要目的一是为了练习英语，二是让自己作为一个 BI开发者对WP7的开发有一个了解。部分翻译不当的地方望各位高人指出批评指正】

 

Windows Phone设备的屏幕都是支持多点触控的，允许用户多指同时操作实现不同的手势功能，比如单击，滑动和放大缩小。Windows Phone下的Silverlight有很多种不同的处理触控输入的方法。此篇描述触控输入的基础内容。

 

主要包含一下部分:

触控输入介绍

手势功能

鼠标事件

Manipulation（操纵）事件

Windows Phone的Silverlight工具包

UI设计与触控输入

 

留意：

此篇包含一些实时演示，是通过浏览器中的Silverlight来模拟Windows Phone下Silverlight的效果。实际的操作可能会和模拟器中或者实际设备中的效果略有不同。

 

触控输入介绍

Windows Phone使用触控的方式完成大多数的输入操作，它支持多点触控让用户以手势操作的方式跟设备交互。填加触控和手势功能将会使程序的用户体验大大提高。在Windows Phone下的Silverlight 可以以很多种方式来处理触控操作。

Silverlight下的鼠标事件可以用来检测一些简单的，单指点击或者双击。鼠标事件在代码中使用很方便和快捷，也是一种实现基本触控功能比较简单的方法。

Manipulation事件，比如ManipulationStarted和ManipulationDelta，用来处理更加复杂的手势功能，比如多点触控时的手势功能和用到惯性和速度的手势功能。

TouchPoint类是另外一种处理触控输入的方法。TouchPoint是一个低级别触控系统，此篇暂不对其进行描述。

第四种方法就是使用Windows Phone下的Silverlight工具包的GestureService和GestureListner类。这个工具包是开源项目，不输入Windows Phone下Silverlight核心的一部分，但是有一些早期版本的控件已经加入到了后续版本的Silverlight中。

 

手势功能

手势功能是一种高级别的方式来把触控数据解释成一些基本的动作，比如点击，滑动和放大缩小。在Windows Phone通用的手势如下：

Tab

手指按下屏幕并抬起

Double Tab

手指敲击屏幕两次

Hold

手指在一个地方短时间的持续点击

Drag

手指按住屏幕并且向一个方向移动

Flick

手指的滑动操作

Pinch

两指在屏幕上的移动

Windows Phone下的Silverlight鼠标事件，比如MouseLeftButtonUp和MouseMove可以用来支持一些最基本的单指操作，比如单击。

对于一些多点触控的手势操作比如放大缩小，还有用到惯性和速度数据的手势比如滑动，就需要用到Manipulation事件，这个事件里提供的信息不是手势的相关信息，而是一些触控的数据，比如位置，和translation delta【译者注：位移增量？】以及速度。这些触控数据可以用来判定手势动作的种类。而开发人员需要做的就是将这些信息转换成等价手势功能。另外，Windows Phone的Silverlight工具包也通过GestureService和GestureListner两个类提供了对手势功能的支持。

 

鼠标事件

使用鼠标事件是实现Windows Phone下Silverlight触控功能最简单的一种方法。鼠标事件仅限于实现单指的手势操作比如单击和双击，但是不支持基于速度的手势功能。单指接触屏幕的时候被转换成了Silverlight的鼠标事件，比如当触控屏幕的时候是MouseLeftButtonDown，手指抬起的时候是MouseLeftButtonUp，手指在屏幕上移动是MouseMove。此外还有MouseLeave和MouseEnter。这些事件的参数是MouseButtonEventArgs。

下面的示例演示如何使用MouseLeftButtonDown，MouseLeftButtonUp和MouseLeave事件处理矩形对象的单击操作。

首先，在XAML中定义一个名称为TestRectangle的Rectangle矩形，以及MouseLeftButtonDown,MouseLeftButtonUp和MouseLeave的事件处理。

XAML

<Rectangle Name="TestRectangle"

Height="100"

Width="200"

Fill="Blue"

MouseLeftButtonDown="Tap_LeftButtonDown"

MouseLeftButtonUp="Tap_LeftButtonUp"

MouseLeave="Tap_MouseLeave" />

下一步，事件处理代码被生成了。MouseLeftButtonDown里增加Rectangle的高度和宽度，MouseLeftButtonUp里恢复其高度和宽度到原先的值。最后，MouseLeave里也设置成对这两个属性值的恢复。

C#

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;

}

}

下面是实例效果。点击矩形区域看看运行的效果。

下面的示例演示如何用按钮的Click事件处理点击操作。

首先，在XAML中创建一个按钮，以及其Click单击事件的处理方法。

XAML

<Button Name="TestButton"

Content="Tap"

Height="100" Width="200"

Click="TestButton_Click" />

在Click事件处理代码中，内容在“Tap”和“Tap Again!”之间来回切换。文本在每次点击的时候都会变化。

C#

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";

}

}

}

下面是实例效果。点击矩形区域看看运行的效果。

 

Manipulation事件

如果需要在程序中支持多指手势，或者包含速度数据的手势操作，那么就需要用到Manipulation事件。可以用Manipulation事件来捕获像滑动，拖拽，放大缩小以及按住屏幕的操作。下表列出了Manipulation事件类。

ManipulationStarted Event

在UIElement的操作开始的时候发生

ManipulationDelta Event

在操作的过程中位置发生变化的时候发生

ManipulationCompleted Event

当操作和加速度完成的时候发生

ManipulationStartedEventArgs

为ManipulationStarted事件提供数据

ManipulationDeltaEventArgs

为ManipulationDelta事件提供数据

ManipulationVelocities

在操作发生的时候描述速度数据

ManipulationCompleteEventArgs

为ManipulationCompleted事件提供数据

在Windows Phone的Silverlight下手势事件是由一系列的Manipulation事件组成。每个手势均由ManipulationStarted事件开始，包括用户开始触摸屏幕，然后，一个或更多的ManipulationDelta事件被触发。比如，当你触摸屏幕并且在屏幕上来回移动的时候，若干ManipulationDelta事件就被触发了。最终，手势操作以ManipulationCompleted事件的触发结束。

如果你使用Windows Phone模拟器来测试Manipulation事件代码并且没有触摸屏的话，测试将要受到限制。模拟器是不支持鼠标的多点触控的。不过可以对偏移进行测试，下面是该实例的演示。

首先，在XAML中创建一个高度和宽度全部为200，名称为TestRectangle的Rectangle。

XAML

<Rectangle Name="TestRectangle"

Width="200"

Height="200"

Fill="Blue" />

然后，为Rectangle创建一个全局的TranslateTransform，名称为dragTranslation，并且为其填加ManipulationDelta事件的处理代码。dragTranslation被填加到了Rectangle的RenderTransform的部分。最后，在ManipulationDelta的事件处理代码中，Rectangle的位置是通过DeltaManipulation属性的TranslateTransform实时更新的。

C#

// 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;

}

下图是运行效果，注，不是在线示例。

 

Windows Phone下的Silverlight工具包

Windows Phone下的Silverlight工具包是一个开源的项目，微软的Silverlight团队分享了新的组件和方法在里面。这个工具包里包含了大量的手势功能框架，他们主要是通过GestureService和GestureListener两个类来捕捉特定的手势。这些类可以大大的简化Silverlight程序中手势的使用。

要用到这些接口，需要在这里下载并安装。其中这个页面里有对当前发布版本的描述。

 

UI设计和触控输入

如何设计用户界面可以影响到在程序中使用触控功能的容易程度。这里有一些在程序中使用触控输入的最佳实践，非常值得阅读，不过这里也要强调一些触控和UI设计：

1. 所有的简单命令都应该用单指去完成。

2. 触控控件应该马上回应。即使在用户触摸屏幕到控件给出响应有轻微的延迟。

3. 提供直接的视觉元素或者声音反馈。

4. 如果操作需要很长时间，应考虑提供更多的反馈信息。

5. 触控目标不应该小于9毫米或者34像素。

6. 在可触控的控件之间应该保留2毫米或者8像素的间距。

7. 在极少数需要控件很小的情况下，也不要创建小玉7毫米或者26像素的控件。

8. 经常需要被用到的控件，需要考虑将其设计成大于9毫米。

9. 触控的目标区域应该比控件本身大，不应该比其更小。

10. 控件不应该小于其触控区域的60%。

11. 纵向排列的矩形或者原型元素更容易被点击到。