We pay for user submitted tutorials and articles that we publish. Anyone can send in a contributionLearn More
As the Headline says, I will show you how to make a Drag and Drop / Move Content control. for this example I will use a canvas and an Image. But you can easily make it more generic by using a Content Control instead of the image.
It is actually very simple, let’s start with the Xaml Code.
As you can see we are using a canvas and an Image.
to implement the drag and move we will need to use the following events:
We register to this event to accomplish 2 actions
This is where the “Magic” happens :). All we need to do is calculate the difference between the mouse position we got at the MouseDown event and add it to the Canvas.Left and Canvas.Top property of the Image. We will then save the current position of the mouse for future MouseMove events.
Releasing the capture from the MouseDown event.
That’s it you can now drag that image around the canvas, Simple no? Wait till you see the Zoom In and Out.
This is so easy it hurts.
All we need to use is the MouseWheel event:
Just add the delta to the Height and Width property of the Image and you are clear.
Tags :Drag & DropDrag & MoveDrag and DropDrag and MoveMouseDownMouseMoveMouseUpMouseWheelZoomZoom InZoom Out
Copyright © 2012 Dev102.com
Breeze : Designed by Amit Raz and Nitzan Kupererd