How to drag a UserControl inside a Canvas

by

This is done in silverlight and not in WPF, but it should work the same.

Create two private properties on the control: 

protected bool isDragging;  
private Point clickPosition;

Then attatch some event handlers in the constructor of the control:

this.MouseLeftButtonDown += new MouseButtonEventHandler(Control_MouseLeftButtonDown);
this.MouseLeftButtonUp += new MouseButtonEventHandler(Control_MouseLeftButtonUp);
this.MouseMove += new MouseEventHandler(Control_MouseMove);

Now create those methods:

private void Control_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    isDragging = true;
    var draggableControl = sender as UserControl;
    clickPosition = e.GetPosition(this);
    draggableControl.CaptureMouse();
}

private void Control_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    isDragging = false;
    var draggable = sender as UserControl;
    draggable.ReleaseMouseCapture();
}

private void Control_MouseMove(object sender, MouseEventArgs e)
{
    var draggableControl = sender as UserControl;

    if (isDragging && draggableControl != null)
    {
        Point currentPosition = e.GetPosition(this.Parent as UIElement);

        var transform = draggableControl.RenderTransform as TranslateTransform;
        if (transform == null)
        {
            transform = new TranslateTransform();
            draggableControl.RenderTransform = transform;
        }

        transform.X = currentPosition.X - clickPosition.X;
        transform.Y = currentPosition.Y - clickPosition.Y;
    }
}

A few things to note here:
1. This does not have to be in a canvas. It can be in a stackpanel, or grid as well.
2. This makes the entire control draggable, that means if you click anywhere in the control and drag it will drag the whole control. Not sure if thats exactly what you want.

Edit-
Expanding on some of the specifics in your question:
The best way that I would implement this is to create a class that inherits from UserControl, maybe called DraggableControl that is built with this code, then all draggable controls should extend the DraggableControl.

Edit 2 – There is small issue when you have a datagrid in this control. If you sort a column in the datagrid the MouseLeftButtonUp event never fires. I have updated the code so that isDragging is protected. I found the best solution is to tie this anonymous method to the LostMouseCapture event of the datagrid: 

this.MyDataGrid.LostMouseCapture += (sender, e) => { this.isDragging = false; };

More Related Contents:

  1. Add n rectangles to canvas with MVVM in WPF
  2. How do you animate a line on a canvas in C#?
  3. Setting Canvas properties in an ItemsControl DataTemplate
  4. How to render a formula in WPF or WinForms
  5. Is it possible to bind a Canvas’s Children property in XAML?
  6. How to create a WPF UserControl with NAMED content
  7. Data Binding in WPF User Controls
  8. Disposing WPF User Controls
  9. How can a WPF UserControl inherit a WPF UserControl?
  10. Cannot delete file when used in DataContext
  11. How to create an image of a WPF UserControl at runtime
  12. MVVM – what is the ideal way for usercontrols to talk to each other
  13. How to fix the flickering in User controls
  14. How can I register a global hot key to say CTRL+SHIFT+(LETTER) using WPF and .NET 3.5?
  15. How to put delay before doing an operation in WPF
  16. Window “on desktop”
  17. Add Shape information to a ListView when its created
  18. WPF – How can I create menu and submenus using binding
  19. how to capture the ‘#’ character on different locale keyboards in WPF/C#?
  20. ObservableCollection and threading [duplicate]
  21. WPF How to access control from DataTemplate
  22. How to implement a navigation button in shared application resources?
  23. WPF ListView: Attaching a double-click (on an item) event
  24. How to generate WPF controls automatically based on XML file?
  25. Binding SelectedItems of ListView to ViewModel
  26. Notify binding for static properties in static classes
  27. WPF: Is there a way to override part of a ControlTemplate without redefining the whole style?
  28. Paste Event in a WPF TextBox
  29. Resize WPF Window and contents depening on screen resolution
  30. Returning from a task without blocking UI thread

Leave a Comment