How can I make a Rectangle on a canvas which is draggable?

Question

I have these three functions to trigger the events. I already have a static version of my needs, but I need a dynamically version of it.

    bool captured = false;
    double x_shape, x_canvas, y_shape, y_canvas;
    UIElement source = null;

    private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        source = (UIElement)sender;
        Mouse.Capture(source);
        captured = true;
        x_shape = Canvas.GetLeft(source);
        x_canvas = e.GetPosition(canvasPreview).X;
        y_shape = Canvas.GetTop(source);
        y_canvas = e.GetPosition(canvasPreview).Y;
    }

    private void MouseMove(object sender, MouseEventArgs e)
    {
        //MessageBox.Show("test");
        if (captured)
        {
            double x = e.GetPosition(canvasPreview).X;
            double y = e.GetPosition(canvasPreview).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 MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Mouse.Capture(null);
        captured = false;
    }

I have made a canvas in WPF called 'canvasPreview', I want to add the rectangle (currently in the static version I am using an ellipse) to the canvas, it must be draggable with above functions. It is already working, but it have to be dynamically.

I hope you can help me, thank you in advance!

Answer 1

I'm sure this sample code will help you.

XAML:

<Grid Margin="12">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <Button x:Name="addRectangleButton" Content="Add Rectngle" Click="addRectangleButton_Click"/>
    </StackPanel>

    <Canvas Grid.Row="1" x:Name="canvas" Margin="0,12,0,0">
        <Rectangle x:Name="rectangle" Width="100" Height="50" Fill="RoyalBlue" MouseDown="rectangle_MouseDown" MouseMove="rectangle_MouseMove" MouseUp="rectangle_MouseUp" Canvas.Left="0" Canvas.Top="0"/>
    </Canvas>
</Grid>

C#:

    bool drag = false;
    Point startPoint;

    public MainWindow()
    {
        InitializeComponent();
    }

    // this creates and adds rectangles dynamically
    private void addRectangleButton_Click(object sender, RoutedEventArgs e)
    {
        // create new Rectangle
        Rectangle rectangle = new Rectangle();
        // assign properties
        rectangle.Width = 100;
        rectangle.Height = 50;
        rectangle.Fill = new SolidColorBrush(Colors.RoyalBlue);
        // assign handlers
        rectangle.MouseDown += rectangle_MouseDown;
        rectangle.MouseMove += rectangle_MouseMove;
        rectangle.MouseUp += rectangle_MouseUp;
        // set default position
        Canvas.SetLeft(rectangle, 0);
        Canvas.SetTop(rectangle, 0);
        // add it to canvas
        canvas.Children.Add(rectangle);
    }

    private void rectangle_MouseDown(object sender, MouseButtonEventArgs e)
    {
        // start dragging
        drag = true;
        // save start point of dragging
        startPoint = Mouse.GetPosition(canvas);
    }

    private void rectangle_MouseMove(object sender, MouseEventArgs e)
    {
        // if dragging, then adjust rectangle position based on mouse movement
        if (drag)
        {
            Rectangle draggedRectangle = sender as Rectangle;
            Point newPoint = Mouse.GetPosition(canvas);
            double left = Canvas.GetLeft(draggedRectangle);
            double top = Canvas.GetTop(draggedRectangle);
            Canvas.SetLeft(draggedRectangle, left + (newPoint.X - startPoint.X));
            Canvas.SetTop(draggedRectangle, top + (newPoint.Y - startPoint.Y));

            startPoint = newPoint;
        }
    }

    private void rectangle_MouseUp(object sender, MouseButtonEventArgs e)
    {
        // stop dragging
        drag = false;
    }