Question

On a wpf I have implemented the practice proposed as answer to the question: How to drag a UserControl inside a Canvas in order to drag and move items (shapes, child canvas) on a canvas. However as correctly indicated the next answer of the same question there is a flaw inside the method:

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;
    }
}

It uses the RenderTranform which does not changes the position of an item permanently but its visual position instead. The result is that the item returns to its initial position just on the next mouse event, so the drag and drop does not work properly (you cannot move it actually in this way but only visually).What kind of modification should be done on it to rectify the functionality of the method? Is there alternatively a similar practice that carries out the task properly? Should I use another Transform like Layout Transform?

Answer 1

What you did is a possible implementation but in WPF there exists already a Control which is made for being dragged around: the Thumb.

example:

      <Canvas Width="200" Height="200" Background="Yellow">
            <Thumb x:Name="DragThumb"  DragDelta="Mover_DragDelta" Canvas.Top="20" Canvas.Left="10" Background="Gray" Width="50" Height="50" >
                <Thumb.Template>
                    <ControlTemplate>
                        <Rectangle Fill="Black" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                    </ControlTemplate>
                </Thumb.Template>
            </Thumb>
        </Canvas>

with a very simple code behind:

private void Mover_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
{
    Canvas.SetLeft(DragThumb, Canvas.GetLeft(DragThumb) + e.HorizontalChange);
    Canvas.SetTop(DragThumb, Canvas.GetTop(DragThumb) + e.VerticalChange);
}

already moves your canvas. (and it stays as the Canvas.Top / Canvas.Left Positions got set).