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

概述    伴随这苹果在设计和用户体验方面取得的成功，现在越来越多的UI交互都向Touch flow方向发展，而Silverlight For Windows Embedded方案，可帮助我们快速建立和实现内涵丰富用户体验友好的软件界面UI，下面通过鼠标事件的方式实现元件的移动和拖拽的效果，我在同一个页面放了很多控件拖拉效率还可以。本示例通过动态加载图片资源，动态为图片资源设置SetRenderTra

    伴随这苹果在设计和用户体验方面取得的成功，现在越来越多的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,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,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->Find@R_403_6889@(TEXT("img2"),&curImage))){ curImage->SetSource(L"//Storage Card//image//menu_1.png"); SetElementRendertransform(curImage,app); AttachMouseEvent(curImage);}

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

总结

以上是内存溢出为你收集整理的Wince中为元件注册鼠标事件以实现Canvas中的拖拽效果全部内容，希望文章能够帮你解决Wince中为元件注册鼠标事件以实现Canvas中的拖拽效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。