Wince中为元件注册鼠标事件以实现Canvas中的拖拽效果

    伴随这苹果在设计和用户体验方面取得的成功，现在越来越多的UI交互都向Touch flow方向发展，而Silverlight For Windows Embedded方案，可帮助我们快速建立和实现内涵丰富用户体验友好的软件界面UI，下面通过鼠标事件的方式实现元件的移动和拖拽的效果，我在同一个页面放了很多控件拖拉效率还可以。本示例通过动态加载图片资源，动态为图片资源设置SetRenderTransform属性实现缩放变暗及拖放效果，有关动态资源加载请参考 在Wince 中使用IXRResourceDictionary加载全局资源App.xaml ！部分代码也请参考前面这篇Blog。

   1、用到的头文件：

#include "stdafx.h"#include <xamlRuntime.h>#include <XRDelegate.h>#include <pwinuser.h>#include <xrptr.h>#include <comutil.h>

   2、设置几个全局变量来记录当前移动的元件对象，移动开始时的坐标，移动完成后的坐标，当前是处于移动状态

IXRDependencyObject* curMoveElement; //當前選中的元件XRPoint beforePoint; //開始鼠標點擊坐標XRPoint endPoint; //鼠标结束坐标bool isMove =false; //鼠标事件当前是否在拖拽图标

   3、实现为元件注册RenderTransform属性的方法

/******** 為元件动态注册Transform屬性已支持移動和動態動畫功能************ element : 动态设置变换属性的元件 app:当前应用程序*****************************************************************************/bool SetElementRenderTransform(IXRFrameworkElement* element,IXRApplication* app){ if(element == NULL) return false; IXRTransformGroup* transGroup; IXRTransformCollection* transColl; IXRTranslateTransform* translate; IXRRotateTransform* rotateTrans; IXRSkewTransform* skewTrans; IXRScaleTransform* scaleTrans; if(FAILED(app->CreateObject(IID_IXRTransformGroup,&transGroup))) return false; if(FAILED(app->CreateObject(IID_IXRTransformCollection,&transColl))) return false; if(FAILED(app->CreateObject(IID_IXRTranslateTransform,&translate))) return false; if(FAILED(app->CreateObject(IID_IXRRotateTransform,&rotateTrans))) return false; if(FAILED(app->CreateObject(IID_IXRSkewTransform,&skewTrans))) return false; if(FAILED(app->CreateObject(IID_IXRScaleTransform,&scaleTrans))) return false; int *scIndex=0; transColl->Add(scaleTrans,scIndex); transColl->Add(skewTrans,scIndex); transColl->Add(rotateTrans,scIndex); transColl->Add(translate,scIndex); transGroup->SetChildren(transColl); element->SetRenderTransform(transGroup); return true;}

   4、实现为元件透明度设置、移动、缩放等功能的方法（调用些方法需要保证 步骤3已调用）这里有一个重载方法只实现移动这样做的目的为了提升效率

 /******** 动态改变元件相关属性已实现移动，旋转等功能******************** source: 要进行变换的元件 transPoint:要位移变换量 angle:旋转变换量 skewPoint:变形变换量 scalePoint:缩放变换量 alpha:元素透明度*****************************************************************************/void SetElementTransForm(IXRDependencyObject* source,XRPoint transPoint,float angle,XRPoint skewPoint,XRPoint scalePoint,float alpha){ IXRFrameworkElement* element = (IXRFrameworkElement*)source; IXRTransform* transform; if(!FAILED(element->GetRenderTransform(&transform))) { IXRTransformGroup* transGroup = (IXRTransformGroup*)transform; IXRTransformCollection* transColl; IXRTranslateTransform* translate; IXRRotateTransform* rotateTrans; IXRSkewTransform* skewTrans; IXRScaleTransform* scaleTrans; transGroup->GetChildren(&transColl); if(!FAILED(transColl->GetItem(0,&scaleTrans))) { scaleTrans->SetScaleX(scalePoint.x); scaleTrans->SetScaleY(scalePoint.x); } if(!FAILED(transColl->GetItem(1,&skewTrans))) { skewTrans->SetAngleX(skewPoint.x); skewTrans->SetAngleY(skewPoint.y); } if(!FAILED(transColl->GetItem(2,&rotateTrans))) { rotateTrans->SetAngle(angle); } if(!FAILED(transColl->GetItem(3,&translate))) { translate->SetX(transPoint.x); translate->SetY(transPoint.y); } element->SetRenderTransform(transGroup); }}/******** 动态改变元件相关属性已实现移动功能***************************** source: 要进行变换的元件 transPoint:要位移变换量*****************************************************************************/void SetElementTransForm(IXRDependencyObject* source,XRPoint transPoint){ IXRFrameworkElement* element = (IXRFrameworkElement*)source; IXRTransform* transform; if(!FAILED(element->GetRenderTransform(&transform))) { IXRTransformGroup* transGroup = (IXRTransformGroup*)transform; IXRTransformCollection* transColl; IXRTranslateTransform* translate; transGroup->GetChildren(&transColl); if(!FAILED(transColl->GetItem(3,&translate))) { translate->SetX(transPoint.x); translate->SetY(transPoint.y); } element->SetRenderTransform(transGroup); }}

   5、下面三个类分别实现鼠标按下，移动，松开事件，实现移动元件的设置，坐标获取，元件移动等操作

/********鼠标按下事件设置选中元素、开始坐标、及对图片进行缩放*********/class OnMouseDownEventHandler{public : HRESULT OnMouseDown(IXRDependencyObject* source,XRMouseButtonEventArgs* args) { if(!FAILED(curMoveElement = args->pOriginalSource) && curMoveElement != NULL) { beforePoint = args->Position; isMove = true; XRPoint movePoint={0,0}; XRPoint skewPoint={0.6f,0.6f}; XRPoint scalePoint={0.85f,0.85f}; float x,y; curMoveElement->GetAttachedProperty(L"Canvas.Left",&x); curMoveElement->GetAttachedProperty(L"Canvas.Top",&y); beforeMove.x = x; beforeMove.y = y; SetElementTransForm(curMoveElement,movePoint,0,skewPoint,scalePoint,0.75); } return 0; }};/********鼠标松开事件设置元件实际移动到的坐标,取消鼠标移动事件取消缩放及透明*********/class OnMouseUpEventHandler{public: HRESULT OnMouseUp(IXRDependencyObject* source,XRMouseButtonEventArgs* args) { if( curMoveElement != NULL) { endPoint = args->Position; if(isMove) { XRPoint point; IXRFrameworkElement* element = (IXRFrameworkElement*)curMoveElement; element->GetActualX(&point.x); element->GetActualY(&point.y); XRPoint movePoint={endPoint.x - beforePoint.x,endPoint.y-beforePoint.y}; XRPoint skewPoint={0,0}; XRPoint scalePoint={1,1}; element->SetAttachedProperty(L"Canvas.Left",point.x+movePoint.x); element->SetAttachedProperty(L"Canvas.Top",point.y+movePoint.y); movePoint.x=0; movePoint.y=0; SetElementTransForm(curMoveElement,movePoint,0,skewPoint,scalePoint,1.0f); isMove = false; } curMoveElement= NULL; return 0; } }};/*********************鼠标移动事件设置元件移动********************/class OnMouseMoveEventHandler{public: HRESULT OnMouseMove(IXRDependencyObject* source,XRMouseEventArgs* args) { if( curMoveElement != NULL && isMove) { endPoint = args->Position; XRPoint movePoint={endPoint.x - beforePoint.x,endPoint.y-beforePoint.y}; SetElementTransForm(curMoveElement,movePoint); } return 0; }};

   6、为元件注册鼠标事件

/*********************为元件设置鼠标事件已支持拖放********************/void AttachMouseEvent(IXRFrameworkElement* element){ IXRDelegate<XRMouseEventArgs>* mouseEventDelegate; IXRDelegate<XRMouseButtonEventArgs>* mouseButtonEventDelegate; OnMouseDownEventHandler mouseDownHandler; OnMouseUpEventHandler mosueupHandler; OnMouseMoveEventHandler mouseMoveHandler; if(!FAILED(CreateDelegate(&mouseDownHandler,&OnMouseDownEventHandler::OnMouseDown,&mouseButtonEventDelegate))) { element->AddMouseLeftButtonDownEventHandler(mouseButtonEventDelegate); } if(!FAILED(CreateDelegate(&mosueupHandler,&OnMouseUpEventHandler::OnMouseUp,&mouseButtonEventDelegate))) { element->AddMouseLeftButtonUpEventHandler(mouseButtonEventDelegate); } if(!FAILED(CreateDelegate(&mouseMoveHandler,&OnMouseMoveEventHandler::OnMouseMove,&mouseEventDelegate))) { element->AddMouseMoveEventHandler(mouseEventDelegate); }}

   7、剩下的就很简单了，调用我们上面写好的方法在Main函数中动态加载png图片注册鼠标事件和RenderTransform：

//設置圖片IXRImage* curImage;if(!FAILED(pRoot->FindName(TEXT("img2"),&curImage))){ curImage->SetSource(L"//Storage Card//image//menu_1.png"); SetElementRenderTransform(curImage,app); AttachMouseEvent(curImage);}

   结语：应用Touch flow，鼠标事件结合手势功能应该会在选择、划屏、拖拽等事件判断,坐标换算中更准确，实际应用过程中应进行结合使用！