C# Tutorial – Move an Image using Drag and Drop in Windows Form

Move an image with drag and drop is kind of important for many games and applications. We wanted to demonstrate a project where you can move an image in windows form with drag and drop. We want to do this using the dynamically drawn image on the screen. We will link a rectangle to the drawn image on the screen and use that to detect clicks and drags in the windows form. You can use any image of your choice for this tutorial. We are using the two images from the tutorial, you can download them from the link below.

Lesson Objectives –

  1. Move an Image using Drag and Drop in Windows Form
  2. Use Rectangle and Image Class in the application
  3. Use mouse down, up and move event in the windows form
  4. Use a timer provide smoother animation

Video Tutorial

 

Download The Card Images Here

Get C# Drag and Drop Single Image in Win Forms Project on GitHub
Form1.cs Source Code –

namespace Move_a_single_image_using_paint_MOO_ICT
{
    public partial class Form1 : Form
    {

        Image card;
        Point position = new Point(200,200);
        bool dragging;
        Rectangle rect;
        int height = 200, width = 100;

        // created by MOOICT.COM
        // for educational purpose only



        public Form1()
        {
            InitializeComponent();

            card = Image.FromFile("guts.jpg");
            rect = new Rectangle(position.X, position.Y, width, height);

        }

        private void FormMouseDown(object sender, MouseEventArgs e)
        {
            Point mousePosition = new Point(e.X, e.Y);
            if (rect.Contains(mousePosition))
            {
                dragging = true;
                label1.Text = "Dragging Image";
            }
        }

        private void FormMouseMove(object sender, MouseEventArgs e)
        {
            if (dragging)
            {
                position.X = e.X - (width / 2);
                position.Y = e.Y - (height / 2);
            }
        }

        private void FormMouseUp(object sender, MouseEventArgs e)
        {
            if (dragging)
            {
                dragging = false;
                rect.Location = new Point(e.X, e.Y);
                label1.Text = "Image dropped @ " + rect.Location.ToString();
            }
        }

        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            Pen outline;

            if (dragging)
            {
                outline = new Pen(Color.Yellow, 6);
            }
            else
            {
                outline = new Pen(Color.Plum, 6);
            }

            e.Graphics.DrawRectangle(outline, rect);
            e.Graphics.DrawImage(card, position.X, position.Y, width, height);

        }

        private void FormTimerEvent(object sender, EventArgs e)
        {
            rect.X = position.X;
            rect.Y = position.Y;

            this.Invalidate();
        }
    }
}

 




Comment on this tutorial and let us know how you got on -