Move the ellipse in shape with the mouse

Question

How to move an ellipse with a mouse on a window in WPF.

private void ellipse_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    if (ellipse != null && e.LeftButton == MouseButtonState.Pressed)
    {
        DragDrop.DoDragDrop(ellipse,
                            ellipse.Fill.ToString(),
                            System.Windows.DragDropEffects.Copy);
    }
}

How to create a method ellipse_MouseClick?

Answer 1

There are no MouseClick events on Ellipses, but there are MouseDown and MouseUp events. I assume you are looking for something like this.

WPF:

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="350" Width="525"
        MouseMove="Any_MouseMove"
        >
    <Canvas>
        <Ellipse Fill="Lavender" Height="100" Width="100" 
                 MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
                 MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
                 MouseMove="Any_MouseMove" />
    </Canvas>
</Window>

Code for:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WpfApplication
{
    public partial class MainWindow : Window
    {
        private UIElement _lastClickedUIElement;
        private Point? _clickOffset;

        public MainWindow() { InitializeComponent(); }

        private void Ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            _lastClickedUIElement = sender as UIElement;
            _clickOffset = e.GetPosition(_lastClickedUIElement);
        }

        private void Ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _lastClickedUIElement = null;
        }

        private void Any_MouseMove(object sender, MouseEventArgs e)
        {
            if (_lastClickedUIElement == null)
                return;

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

Click on a circle to move it. This will work with any user interface element until you give them these methods. Feel free to also add a rectangle to the canvas.

<Rectangle Fill="Lavender" Height="100" Width="100" 
         MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
         MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
         MouseMove="Any_MouseMove" />

Answer 2

I use three events to accomplish this task:

XAML:

<Window x:Class="WpfPainting.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="700" WindowStartupLocation="CenterScreen">
    <DockPanel>
        <Canvas Background="White" Name="CanvasArea"/>
    </DockPanel>
</Window>

The code:

private UIElement source;
private bool captured;
double x_shape, x_canvas, y_shape, y_canvas;
private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Mouse.OverrideCursor = Cursors.SizeAll;
    source = (UIElement)sender;
    Mouse.Capture(source);
    captured = true;
    x_shape = Canvas.GetLeft(source);
    x_canvas = e.GetPosition(CanvasArea).X;
    y_shape = Canvas.GetTop(source);
    y_canvas = e.GetPosition(CanvasArea).Y;
}

private void ellipse_MouseMove(object sender, MouseEventArgs e)
{
    if (captured)
    {
        double x = e.GetPosition(CanvasArea).X;
        double y = e.GetPosition(CanvasArea).Y;
        x_shape += x - x_canvas;
        Canvas.SetLeft(source, x_shape);
        x_canvas = x;
        y_shape += y - y_canvas;
        Canvas.SetTop(source, y_shape);
        y_canvas = y;
    }
}

private void ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Mouse.Capture(null);
    captured = false;
    Mouse.OverrideCursor = null;
}

To use events on a colored ellipse, I refer to them as follows:

ellipse.MouseLeftButtonDown += conveyor_MouseLeftButtonDown;
ellipse.MouseMove += conveyor_MouseMove;
ellipse.MouseLeftButtonUp += conveyor_MouseLeftButtonUp;