Dragging a WPF user control

Question

I created a movable UserControl

    <UserControl x:Class="Restaurant.Views.Managerer.TablePanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Restaurant.Helpers.Converter"
        mc:Ignorable="d"
        x:Name="root"
        MouseLeftButtonDown="root_MouseLeftButtonDown"
        MouseLeftButtonUp="root_MouseLeftButtonUp"
        MouseMove="root_MouseMove"    
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
....

Code

Point anchorPoint;
        Point currentPoint;
        bool isInDrag = false;

        private void root_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            var element = sender as FrameworkElement;
            anchorPoint = e.GetPosition(null);
            element.CaptureMouse();
            isInDrag = true;
            e.Handled = true;
        }

        private void root_MouseMove(object sender, MouseEventArgs e)
        {
            if (isInDrag)
            {
                var element = sender as FrameworkElement;
                currentPoint = e.GetPosition(null);

                var transform = new TranslateTransform
                                    {
                                        X = (currentPoint.X - anchorPoint.X),
                                        Y = (currentPoint.Y - anchorPoint.Y)
                                    };
                this.RenderTransform = transform;
                anchorPoint = currentPoint;
            }
        }

        private void root_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isInDrag)
            {
                var element = sender as FrameworkElement;
                element.ReleaseMouseCapture();
                isInDrag = false;
                e.Handled = true;
            }
        }

If I change the code from

X = (currentPoint.X - anchorPoint.X),
Y = (currentPoint.Y - anchorPoint.Y)

to

X = (currentPoint.X),
Y = (currentPoint.Y)

I can move the UserControl, but the mouse and UserControl do not match

Solution 1

Good morning. I slept and can think )))

 private TranslateTransform transform = new TranslateTransform();
        private void root_MouseMove(object sender, MouseEventArgs e)
        {
            if (isInDrag)
            {
                var element = sender as FrameworkElement;
                currentPoint = e.GetPosition(null);

                transform.X += currentPoint.X - anchorPoint.X;
                transform.Y += (currentPoint.Y - anchorPoint.Y);
                this.RenderTransform = transform;
                anchorPoint = currentPoint;
            }
        }

Solution 2

I really am not sure what exactly you're trying to accomplish in your question but Thumbs are much easier for dragging motions. You can see an explanation and sample code (at the bottom) here.

Comments

[SepehrM]

Nice, But This approach is not very efficient. When dragging a grid containing about 10 custom template controls, my CPU load goes up to 23%! (Core i7 3770) Isn't there a better way of doing that? I also changed the parent container to canvas and used Canvas.SetLeft, but no performance change.

[Eli Dagan]

I suggest to also use rx throttling on mouse move in order to handle less enents

[Kevin B Burns]

How do you prevent the control from going out of bounds? I started using this to drag a control around and it works great, but when the user gets to the edge it will let the control go out of the window and become invisible.

[Informagic]

This results in easily avoidable “jumping” behavior. (Avoidable, for instance, by referring to Thumb.) Also, the alleged “error” is entirely unrelated to the issue at hand.

[Harikrishnan N]

Link expired. Any more info about this?