Hi.
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.
1: <Canvas Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Stretch"
2: VerticalAlignment="Stretch" x:Name="ImageHolder" >
3: <Image Canvas.Left="0" MouseWheel="Img_MouseWheel" MouseMove="Img_MouseMove"
4: MouseDown="Img_MouseDown" MouseUp="Img_MouseUp" Panel.ZIndex="0"
5: Cursor="Hand" Canvas.Top="0" Height="150" Width="150" Source="sketch.jpg"
6: x:Name="Img">
7: </Image>
8: </Canvas>
As you can see we are using a canvas and an Image.
Implementing Drag and Move
to implement the drag and move we will need to use the following events:
- MouseDown
- MouseMove
- MouseUp
MouseDown event
1: private void Img_MouseDown(object sender, MouseButtonEventArgs e)
2: {
3: Img.CaptureMouse();
4: p = e.GetPosition(ImageHolder);
5: }
We register to this event to accomplish 2 actions
- capture the mouse - meaning if you move the mouse away from the image border it will still be considered as you are moving on the image border (you know what I am talking about, you drag to fast and then it stops moving).
- Establish a starting point on the screen by getting the position of the mouse relative to a control. It does not matter which control you choose as long as it does not move.
MouseMove event
1: private void Img_MouseMove(object sender, MouseEventArgs e)
2: {
3: Point x = e.GetPosition(ImageHolder);
4: if (e.LeftButton == MouseButtonState.Pressed)
5: {
6: Canvas.SetLeft(Img, Canvas.GetLeft(Img) + (x.X - p.X));
7: Canvas.SetTop(Img, Canvas.GetTop(Img) + (x.Y - p.Y));
8: }
9: p = x;
10: }
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.
MouseUp event
1: private void Img_MouseUp(object sender, MouseButtonEventArgs e)
2: {
3: Img.ReleaseMouseCapture();
4: }
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.
Implementing Zoom In and Zoom Out
This is so easy it hurts.
All we need to use is the MouseWheel event:
1: private void Img_MouseWheel(object sender, MouseWheelEventArgs e)
2: {
3: Img.Height += e.Delta;
4: Img.Width += e.Delta;
5: }
Just add the delta to the Height and Width property of the Image and you are clear.
That’s it.
You can download a sample project from our Freebies Page. and don’t forget to grab our feed and stay updated.
Enjoy
Amit
1 Trackback(s)
- Sep 6, 2009: WPF: 90+ Miejsc które warto zna? « Dawid Po?li?ski
Write for Dev102!
We pay for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Learn More
Sam Azish Said on Feb 23, 2009 :
It would be a more complete solution by using a Thumb control. When using other controls, you only have mouse events when mouse is over that control but by using a Thumb control, you can capture these even when mouse is outside the control using OnThumbDragDelta event.
Hüseyin Tüfekçilerli Said on Feb 23, 2009 :
Thanks for a nice and simple solution. I would rather implement this pan & zoom functionality with Transformations though:
http://pastebin.com/f1ac1d957
Amit Said on Feb 23, 2009 :
@ Sam
So you mean I could zoom in even if the mouse is not on the image?
I will have to check that out. I have never stumbled onto the Thumb control.
Thanks
Amit Said on Feb 23, 2009 :
@ Huseyin
I think that will have its cost in resources no?
Sam Azish Said on Feb 24, 2009 :
No idea about zooming but I was talking about moving the control inside canvas.
Sam
Amit Said on Feb 24, 2009 :
@Sam
What will the Thumb give me? I used MouseCapture to capture the movement when the mouse is outside the Image.
Amit
Sam Azish Said on Feb 24, 2009 :
Thumb control internally pauses mouse over object and controls mouse capture using left mouse button and doing all the necessary job for you so you won’t need to capture/release mouse and check if a button is pressed or not.
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.thumb.dragdelta(VS.85).aspx
MK Said on Jul 6, 2009 :
What is “p” and Where is “p” defined?