Windows Phone笔记(3)触摸简介

windows phone手机的屏幕非常灵敏，至少能够同时检测4个手指的多点触摸，这种多个手指间的互动使得开发者在处理多点触摸时面临了很大的挑战，在silverlight框架中，触摸输入是通过事件来获取的。

　　silverlight支持两种不同的接口来支持多点触摸，分别为：底层接口和高层接口。其中，

　　底层接口：是基于静态的touch.framereported事件;

　　高层接口：是由uielement类中定义3个事件组成：manipulationstarted，manipulationdelta和manipulationcompleted。这些事件统称为：manipulation事件。

 

1.底层接口
　　silverlight底层触摸接口的核心是：touchpoint类型，touchpoint的每个实例分别表示触摸屏幕的一个特定手势。

touchpoint具有四个只读属性:

 

属性	类型	说明
action	touchaction	枚举类型，包含down、move、up三个成员
position	point	表示触摸坐标，相对于特定元素左上角的位置，称为参考(reference)元素。
size	size	类型为size，表示接触面积(以及手指压力大小)，但在windows phone中目前还没有作用。
touchdevice	touchdevice	有两个只读属性:①.id,类型为int，用于区分不同的手势，从down到up的所有事件中，一个特定的手势是由一个唯一的id。 　　　　　　   ②.directlyover，类型为uielement,手指下的最顶层的元素，通常用来确定用户正在触摸的元素。

 
  

下面让我们来观察一个示例，该示例的效果是：只要触摸屏幕内的任何元素，textblock元素的文本颜色就会随机改变：
首先在mainpage.xaml中增加一个textblock元素:
1  <textblock name="txtblk" text="hello,windows phone!" padding="0 34" horizontalalignment="center" verticalalignment="center"/>

要使用底层触摸接口需要为静态的touch.framereported事件注册一个事件处理程序。
1  touch.framereported += ontouchframereported;//绑定事件
 
下面是ontouchframereported方法的代码，该事件处理程序获取应用程序中所有的触摸事件(其中,"rand"变量是random类的一个实例,随机生成rgb颜色)。
1    private void ontouchframereported(object sender, touchframeeventargs args)
2         {
3             touchpoint primarytouchpoint = args.getprimarytouchpoint(null);//获取触屏点左上角的位置
4
5             if (primarytouchpoint != null && primarytouchpoint.action == touchaction.down)//判断触控的类型
6             {
7                 this.txtblk.foreground = new solidcolorbrush(color.fromargb(255, (byte)rand.next(256), (byte)rand.next(256), (byte)rand.next(256)));//随机改变textblock文本的颜色
8             }
9         }

请注意这个方法是效果：即使我们点击textblock以外的区域，也同样会触发ontouchframereported事件，这显然没有达到我们的预期，但是如何把事件的作用只限制在textblock控件中呢？很简单,只需要加一个if判断就可以了:
 1   private void ontouchframereported(object sender, touchframeeventargs args)
 2         {
 3             touchpoint primarytouchpoint = args.getprimarytouchpoint(null);
 4
 5             if (primarytouchpoint != null && primarytouchpoint.action == touchaction.down)//判断触控的类型
 6             {
 7                 if (primarytouchpoint.touchdevice.directlyover == this.txtblk)//获取触控的最顶层元素
 8                 {
 9                     this.txtblk.foreground = new solidcolorbrush(color.fromargb(255, (byte)rand.next(256), (byte)rand.next(256), (byte)rand.next(256)));
10                 }
11             }   
12         }

这样，就除了触摸textblock元素以外都不会触发该事件了。运行如下:

  


 

2.高层接口
　　silverlight中的高层接口包含了3个事件:①manipulationstarted  ②manipulationdelta  ③manipulationcompleted。这些事件并不处理单个的手势活动，而是将多个手势的活动合并到转换和缩放中。这些事件也累加了速度信息，可以用来实现惯性操作。
高层接口和底层接口的区别在于：
　　touch.framereported为整个应用程序传递触摸信息，而manipulation事件是基于单个元素的。
 下面让我们来查看一个示例程序:
这是mainpage.xaml代码,我们直接在xaml中注册事件:
1   <textblock text="hello windows phone" padding="0 34" horizontalalignment="center" verticalalignment="center" manipulationstarted="textblock_manipulationstarted"/>
2         </grid>

mainpage.xmal.cs中的事件处理程序:
 1   public partial class mainpage : phoneapplicationpage
 2     {
 3         // 构造函数
 4         random rand = new random();
 5         public mainpage()
 6         {
 7             initializecomponent();
 8         }
 9
10         private void textblock_manipulationstarted(object sender, manipulationstartedeventargs e)
11         {
12             textblock txtblk = sender as textblock;
13             color clr = color.fromargb(255, (byte)rand.next(256), (byte)rand.next(256), (byte)rand.next(256));
14
15             txtblk.foreground = new solidcolorbrush(clr);
16             e.complete();//不是必须的,表示已经完成了操作
17         }
18     }

在这个事件处理程序中，只有触摸了textblock控件，才会触发这个事件。
 
换一种方式能够实现同样类似的效果，而且更简单 —— uielement类定义了所有的manipulation事件，而control(mainpage的基类)为这些事件提供了protected的虚方法，现在并不需要为mainpage页面注册manipulation事件的处理程序，只需要重写这个虚方法就可以了。
参考下面的示例：
mainpage.xmal
<textblock name="txtblk" padding="0 34" verticalalignment="center" horizontalalignment="center" text="hello,windows phone"/>
 
mainpage.xmal.cs
 1  public partial class mainpage : phoneapplicationpage
 2     {
 3         random rand = new random();
 4         brush originalbrush;
 5         // 构造函数
 6         public mainpage()
 7         {
 8             initializecomponent();
 9             originalbrush = this.txtblk.foreground;
10         }
11
12         protected override void onmanipulationstarted(manipulationstartedeventargs e)
13         {
14             if (e.originalsource == this.txtblk)
15             {
16                 this.txtblk.foreground = new solidcolorbrush(color.fromargb(255, (byte)rand.next(256), (byte)rand.next(256), (byte)rand.next(256)));
17             }
18             else
19             {
20                 this.txtblk.foreground = originalbrush;
21             }
22
23             e.complete();
24             base.onmanipulationstarted(e);
25         }
26     }

在上面的示例中我们可以通过originalsource属性知道事件在可视化树中的真实来源，也就是实际触发事件的元素。这得益于sliverlight的一个功能特征路由事件处理(routed event handling).
 
路由事件
　　如果顶层元素不关心一个事件的话，该事件就会转发到该元素的父元素去，这样，一直转发到可视化树*的phoneapplicationframe元素为止，沿途的任何元素都可以获取这个输入事件并进行处理，也能阻止事件往树的高层继续传递。
　　那么根据上面的原理我们编写一个新的示例，注册一个manipulation事件和重写manipulation事件的虚方法，前者只处理textblock的触摸事件,后者负责处理mainpage页面上的所有触摸事件。
mainpage.xmal:
  <textblock name="txtblk" text="hello,windows phone" padding="0 34" fontsize="28" verticalalignment="center" horizontalalignment="center" manipulationstarted="txtblk_manipulationstarted"/>

 
mainpage.xmal.cs:
 1   public partial class mainpage : phoneapplicationpage
 2     {
 3         random rand = new random();
 4         brush originalbrush;
 5         // 构造函数
 6         public mainpage()
 7         {
 8             initializecomponent();
 9             originalbrush = this.txtblk.foreground;
10         }
11
12         private void txtblk_manipulationstarted(object sender, manipulationstartedeventargs e)
13         {
14             this.txtblk.foreground = new solidcolorbrush(color.fromargb(255,(byte)rand.next(256),(byte)rand.next(256),(byte)rand.next(256)));
15             e.complete();
16             e.handled = true;//表示事件已经处理，不需要再进一步传递到可视化树的上层了
17         }
18
19         protected override void onmanipulationstarted(manipulationstartedeventargs e)
20         {
21             this.txtblk.foreground = originalbrush;
22
23             e.complete();
24             base.onmanipulationstarted(e);
25         }
26     }

程序运行效果：
　触摸textblock随机改变文本颜色　　　　　　　  触摸textblock以外的区域textblock文本颜色将回复到初始状态
 
 

  
  
  
摘自 晴天猪の博客