[翻译]WP7 QuickStart-第九篇-触控输入
原文地址：vcxvpy2tzdgfydhmvvg91y2hfsw5wdxq=">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设计和触控输入
如何设计用户界面可以影响到在程序中使用触控功能的容易程度。aspx" style="color: rgb(26, 139, 200); text-decoration: none; ">这里有一些在程序中使用触控输入的最佳实践，非常值得，不过这里也要强调一些触控和ui设计：
1. 所有的简单命令都应该用单指去完成。
2. 触控控件应该马上回应。即使在用户触摸屏幕到控件给出响应有轻微的延迟。
3. 提供直接的视觉元素或者声音反馈。
4. 如果操作需要很长时间，应考虑提供更多的反馈信息。
5. 触控目标不应该小于9毫米或者34像素。
6. 在可触控的控件之间应该保留2毫米或者8像素的间距。
7. 在极少数需要控件很小的情况下，也不要创建小玉7毫米或者26像素的控件。
8. 经常需要被用到的控件，需要考虑将其设计成大于9毫米。
9. 触控的目标区域应该比控件本身大，不应该比其更小。
10. 控件不应该小于其触控区域的60%。
11. 纵向排列的矩形或者原型元素更容易被点击到。
作者 aspnetx宋卫东
上一篇： Matlab外观模式
下一篇： iOS开发之过渡