Advertise on Dev102 Advertise on Dev102 Advertise on Dev102 Advertise on Dev102
Write Article for Dev102

Write for Dev102!

We pay for user submitted tutorials and articles that we publish. Anyone can send in a contribution

Learn More

How to Create a Drag & Drop / Move, Zoom In & Out Content Control

By Amit

February 23, 2009

.Net, C#, WPF

14 Comments

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

  1. 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).
  2. 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

Related Articles

  1. EventArgs.Empty - Do You Use It?
  2. How to Create a Word Like Font Selection in WPF ComboBox
  3. Create your Logos, Buttons and Icons for Free
  4. Parameter count mismatch Error
  5. How to Sort Elements in a Content Control Without Touching The Data.

Tags :

14 Responses to “How to Create a Drag & Drop / Move, Zoom In & Out Content Control”


  1. Sam Azish

    Said on February 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.

  2. Hüseyin Tüfekçilerli

    Said on February 23, 2009 :

    Thanks for a nice and simple solution. I would rather implement this pan & zoom functionality with Transformations though:

    http://pastebin.com/f1ac1d957

  3. Amit

    Said on February 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

  4. Amit

    Said on February 23, 2009 :

    @ Huseyin

    I think that will have its cost in resources no?

  5. Sam Azish

    Said on February 24, 2009 :

    No idea about zooming but I was talking about moving the control inside canvas.

    Sam

  6. Amit

    Said on February 24, 2009 :

    @Sam

    What will the Thumb give me? I used MouseCapture to capture the movement when the mouse is outside the Image.

    Amit

  7. Sam Azish

    Said on February 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

  8. MK

    Said on July 6, 2009 :

    What is “p” and Where is “p” defined?

  9. Seahna

    Said on November 18, 2009 :

    Can this be done without xml codinging?

  10. Tony

    Said on December 4, 2009 :

    I think you missed the point. (Sorry bad pun)

    p is a System.Windows.Point

  11. CB

    Said on February 2, 2010 :

    Hello,
    I am trying to implement the panning, but getting strange results.
    I have a Canvas inside a ScrollViewer.
    When I move the mouse (w/ left button pressed) steadily to the right, almost every other position is smaller than the one before.
    That is, this code in the MouseMove handler:
    Point newOffsetPos = e.GetPosition(MapCanvas);
    Debug.WriteLine(” newOffsetPos : ” + newOffsetPos.X + ” ” + newOffsetPos.Y);
    produces this:
    newOffsetPos : 1259 851
    newOffsetPos : 1254 850
    newOffsetPos : 1260 851
    newOffsetPos : 1255 850
    newOffsetPos : 1261 851
    newOffsetPos : 1256 850
    newOffsetPos : 1262 851
    newOffsetPos : 1257 850
    Is this some interaction between the ScrollViewer and the Canvas? Any suggestions for how to smooth this out?
    Thanks for the article.

  12. Aminems

    Said on September 2, 2010 :

    Think’s a lot for your article, it’s very helpful .

  13. John

    Said on February 19, 2011 :

    Great article! For some reason I had to use PreviewMouseMove, PreviewMouseUp, and PreviewMouseDown instead. Maybe it’s a WPF thing. Thanks!

1 Trackback(s)

  1. Sep 6, 2009: WPF: 90+ Miejsc które warto zna? « Dawid Po?li?ski

Post a Comment