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

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

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

 

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

 

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

 

Silverlight for Windows Embedded中也对Gesture进行了支持，可以对UIElement用XRGestureEventArgs结构创建Gesture事件的委托（Delegate，可以理解为事件处理函数指针）。UIElement可以看作是所有可见控件的父类。@H_502_11@@H_502_11@ 一个例子，功能是当flick屏幕时播放动画@H_502_11@ C++代码如下：

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

@H_502_11@ XAML代码：

01 <UserControl @H_502_11@02     xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" @H_502_11@03     xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" @H_502_11@04     x:Class= "SilverlightApplication1.Page" @H_502_11@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" > @H_502_11@06     <UserControl.Resources> @H_502_11@07         <Storyboard x:Name= "grid_move" > @H_502_11@08             <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" Storyboard.TargetName= "grid_main" Storyboard.TargetProperty= "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" > @H_502_11@09                 <SplineDoubleKeyFrame KeyTime= "00:00:00" Value= "0" /> @H_502_11@10                 <SplineDoubleKeyFrame KeyTime= "00:00:01" Value= "-788" /> @H_502_11@11             </DoubleAnimationUsingKeyFrames> @H_502_11@12         </Storyboard> @H_502_11@13     </UserControl.Resources> @H_502_11@14         <Grid Background= "#00000000" x:Name= "grid_main" RenderTransformOrigin= "0.5,0.5" > @H_502_11@15             <Button orizontalAlignment= "Center" x:Name= "button01" VerticalAlignment= "Center" Opacity= "1" /> @H_502_11@16         </Grid> @H_502_11@17 </UserControl> @H_502_11@

 

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

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