欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-30 20:10:06
  原文地址:vcxvpy2tzdgfydhmvvg91y2hfsw5wdxq=">http://create.msdn.com/en-us/education/quickstarts...

 

原文地址: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宋卫东