Shaking in dragging object

Question

I am new to C#. I have been testing in C# (wpf) with MouseDown and MouseMove. Try to create a simple ellipse that can be dragged with the click and movement of the mouse, within a canvas. All good until I run the code and I see that when I drag the ellipse it shakes. I know for some it's not a problem, but for me it is. Next the code in xaml that I use.

<Canvas>
        <Ellipse x:Name="circulito" Fill="#FFFDC347" Height="100" Stroke="Black"  Width="100"
        MouseDown="circulito_MouseDown"
        MouseMove="circulito_MouseMove"/>
</Canvas>

Next the code in c#.

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        Point coor;
        Point coorPutin;

        private void circulito_MouseDown(object sender, MouseButtonEventArgs e)
        {
            coor.X = Canvas.GetLeft(this);
            coor.Y = Canvas.GetTop(this);
        }

        private void circulito_MouseMove(object sender, MouseEventArgs e)
        {            
            coorPutin = e.GetPosition(circulito);                        

            if (Mouse.LeftButton == MouseButtonState.Pressed)
            {
                Canvas.SetLeft(circulito, coor.X + coorPutin.X);
                Canvas.SetTop(circulito, coor.Y + coorPutin.Y);
            }
        }

Answer 1

All good until I run the code and I see that when I drag the ellipse it shakes

The reason for this is because of your circulito_MouseMove routine. You don't need to check if the button is down or not also you are trying to set the canvas, this wont work, you need to set the element (Ellipse) TopProperty and LeftProperty. Please see below for working solution.

MainWindow.xaml.cs

public partial class MainWindow : Window
    {
        private Ellipse _ellipse;
        private Point? _coor;

        public MainWindow() { InitializeComponent(); }

        private void circulito_MouseDown(object sender, MouseButtonEventArgs e)
        {
            _ellipse = sender as Ellipse;
            _coor = e.GetPosition(_ellipse);
        }

        private void circulito_MouseMove(object sender, MouseEventArgs e)
        {
            if (_ellipse == null)
                return;

            _ellipse.SetValue(Canvas.LeftProperty, e.GetPosition(this).X - _coor.Value.X);
            _ellipse.SetValue(Canvas.TopProperty, e.GetPosition(this).Y - _coor.Value.Y);
        }

        private void circulito_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) => _ellipse = null;

    }

MainWindow.xaml

<Window x:Class="WpfApp12.MainWindow"
        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"
        Title="MainWindow"
        Width="800"
        Height="450"
        mc:Ignorable="d"
        MouseMove="circulito_MouseMove"
        >
    <Canvas>
        <Ellipse x:Name="circulito"
                 Width="100"
                 Height="100"
                 Fill="#FFFDC347"
                 Stroke="Black"
                 MouseLeftButtonDown="circulito_MouseDown"
                 MouseLeftButtonUp="circulito_MouseLeftButtonUp"
                 MouseMove="circulito_MouseMove"
                 />
    </Canvas>
</Window>

Please note in the MainWindow.xaml Window element, you need to handle the MouseMove event as well...

 MouseMove="circulito_MouseMove"