zoukankan      html  css  js  c++  java
  • [翻译]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;

    }

    }

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

    Get Microsoft Silverlight

    下面的示例演示如何用按钮的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";

    }

    }

    }

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

    Get Microsoft Silverlight

     

    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;

    }

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

    clip_image001

     

    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. 纵向排列的矩形或者原型元素更容易被点击到。

  • 相关阅读:
    [ASM/C/C++]内存碎片处理技术
    NASM网际编译器手册(三)
    NASM网际编译器手册(四)
    NASM网际编译器手册(六)
    NASM网际编译器手册(一)
    IEEE浮点数表示法
    设计模式学习每日一记(12.轻量模式)
    设计模式学习每日一记(11.代理模式)
    canvas一句话备忘录
    usaco1.1.1PROB Your Ride Is Here
  • 原文地址:https://www.cnblogs.com/aspnetx/p/2230861.html
Copyright © 2011-2022 走看看