在WinCE R3基于Silverlight程序中使用Gesture(手势)

IPHONE那种用手指在屏幕上划来划去的操作方式开创了用户体验新时代。这种方式叫做Gesture(手势)。

在WinCE6.0 R3中增添了对5种Gesture的支持，分别为

 

1. Flick，手指朝屏幕的任何方向快速的滑动，并松开；
2. Pan，手指在屏幕上拖动目标，不松手；
3. Tap，点击；
4. Double Tap，双击；
5. Hold，按住屏幕不放（也不移动），相当于点击鼠标右键。

 

PS：据说是由于专利问题，所以现在还不支持多点触摸，就是说不能直接实现两个手指放大缩小那种功能。据说该专利掌握在苹果手里，又据说winCE7.0会支持。。。。。

 

Silverlight for Windows Embedded中也对Gesture进行了支持，可以对UIElement用XRGestureEventArgs结构创建Gesture事件的委托（Delegate，可以理解为事件处理函数指针）。UIElement可以看作是所有可见控件的父类。

一个例子，功能是当flick屏幕时播放动画
C++代码如下：

001 #include "stdafx.h"
002 #include "pwinuser.h"
003 #include "xamlruntime.h"
004 #include "xrdelegate.h"
005 #include "xrptr.h"
006 #include "resource.h"
007
008 //保存根据xaml 资源创建的可视树根
009 IXRFrameworkElementPtr root ;
010
011 //对xaml中的grid面板的手势事件处理
012 class Grid_GestureEventHandler
013 {
014     public :
015         HRESULT OnGesture ( IXRDependencyObject * pSender , XRGestureEventArgs * pArgs )
016         {
017             IXRStoryboardPtr storyboard ;
018             switch (pArgs -> GestureInfo . dwID )//从XRGestureEventArgs中得到手势的类型
019             {
020                 case GID_BEGIN:
021                     break ;
022                 case GID_END:
023                     break ;
024                 case GID_PAN:
025                     break ;
026                 case GID_ROTATE:
027                     break ;
028                 case GID_SCROLL:
029                     //还可以得到手势的速度、弧度和方向，本例前两个没有用到
030                     velocity = GID_SCROLL_VELOCITY (pArgs -> GestureInfo . ullArguments );
031                     angle =   GID_SCROLL_ANGLE (pArgs -> GestureInfo . ullArguments );
032                     direction = GID_SCROLL_DIRECTION (pArgs -> GestureInfo . ullArguments );
033                     switch (direction )
034                     {
035                         case ARG_SCROLL_NONE:
036                             break ;
037                         case ARG_SCROLL_DOWN:
038                             break ;
039                         case ARG_SCROLL_LEFT:
040                             break ;
041                         case ARG_SCROLL_UP:
042                             break ;
043                         case ARG_SCROLL_RIGHT: //这里的方向是跟手指划动相反，其实意义是滚动条的方向
044                             //在xaml中找到grid_move的storyboard(可以理解为动画)
045                             root -> FindName (TEXT ("grid_move" ), & storyboard );
046                             storyboard -> Stop ();
047                             storyboard -> Begin ();//播放动画
048                             break ;
049                         default :
050                             break ;
051                     }                    
052                     break ;
053                 case GID_HOLD:
054                     break ;
055                 case GID_SELECT:
056                     break ;
057                 case GID_DOUBLESELECT:
058                     break ;
059             }
060             return S_OK ;
061         }
062
063         private :
064             ULONGLONG velocity ;
065             ULONGLONG angle ;
066             ULONGLONG direction ;
067            
068 };
069
070 int WINAPI WinMain (HINSTANCE hInstance ,
071                      HINSTANCE hPrevInstance ,
072                      LPTSTR      lpCmdLine ,
073                      int        nCmdShow )
074 {
075     if (! XamlRuntimeInitialize ())
076         return - 1 ;
077
078     HRESULT retcode ;
079     IXRApplicationPtr app ;
080
081     if (FAILED (retcode = GetXRApplicationInstance (& app )))
082         return - 1 ;
083
084     if (FAILED (retcode = app -> AddResourceModule (hInstance )))
085         return - 1 ;
086
087     XRWindowCreateParams wp ;
088     ZeroMemory (& wp , sizeof (XRWindowCreateParams ));
089
090     wp . Style        = WS_POPUP ;
091     wp . pTitle       = L"SL Gesture Sample" ;
092     wp . Left         = 0 ;
093     wp . Top          = 0 ;
094
095     //根据IDR_XAML资源初始化可视树
096     XRXamlSource xamlsrc ;
097     xamlsrc . SetResource (hInstance , TEXT ("XAML" ), MAKEINTRESOURCE (IDR_XAML1 ));
098
099     IXRVisualHostPtr vhost ;
100     if (FAILED (retcode = app -> CreateHostFromXaml (& xamlsrc , & wp , & vhost )))
101         return - 1 ;
102    
103     if (FAILED (retcode = vhost -> GetRootElement (& root )))
104         return - 1 ;
105
106     //创建一个手势的委托
107     IXRDelegate < XRGestureEventArgs >* gridGestureDelegate ;
108     Grid_GestureEventHandler gridGestureHandler ;
109     if (FAILED (retcode = CreateDelegate (& gridGestureHandler , & Grid_GestureEventHandler :: OnGesture , & gridGestureDelegate )))
110         return - 1 ;
111     //把手势委托跟可视树中的grid联系起来
112     IXRGrid * grid ;
113     if (FAILED ( retcode = root -> FindName (TEXT ("grid_main" ), & grid )) )
114         return - 1 ;
115     if (FAILED ( retcode = grid -> AddGestureEventHandler (gridGestureDelegate )) )
116         return - 1 ;
117
118
119     UINT exitcode ;
120
121     if (FAILED (retcode = vhost -> StartDialog (& exitcode )))
122         return - 1 ;
123
124     gridGestureDelegate -> Release ();
125
126     return 0 ;
127 }

XAML代码：

01 <UserControl
02     xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03     xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
04     x:Class= "SilverlightApplication1.Page"
05     Width= "800" Height= "600" Visibility= "Visible" xmlns:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" >
06     <UserControl.Resources>
07         <Storyboard x:Name= "grid_move" >
08             <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" Storyboard.TargetName= "grid_main" Storyboard.TargetProperty= "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" >
09                 <SplineDoubleKeyFrame KeyTime= "00:00:00" Value= "0" />
10                 <SplineDoubleKeyFrame KeyTime= "00:00:01" Value= "-788" />
11             </DoubleAnimationUsingKeyFrames>
12         </Storyboard>
13     </UserControl.Resources>
14         <Grid Background= "#00000000" x:Name= "grid_main" RenderTransformOrigin= "0.5,0.5" >
15             <Button orizontalAlignment= "Center" x:Name= "button01" VerticalAlignment= "Center" Opacity= "1" />
16         </Grid>
17 </UserControl>

 

grid中有一个按钮，划动屏幕时grid和按钮一起移出了屏幕（就是播放了在xaml的storyboard中定义的动画），如果多放些图标就可以实现像Iphone那种效果，可以添加Pan手势的代码来实现拖动图标的功能，或者使用Hold手势进入图标编辑状态。上面的例子中的grid一定要设置Background属性，如果不想要显示背景可以把值设为#00000000，这样的话就是透明的，但在空白的区域Gesture也同样会有效。

写的不好，希望您能看懂，请多多指教。