C# Drag and Drop from one Picture box into Another

Question

I'm working in visual studio 2012 with C# and I need to Drag a Picture box into another picture box, basically replace the target Picturebox Image with the Dragged Picture box image.

How do I do this?

Please be specific and try to explain as simplest and as best as possible. I'm extremely new to programming, and a bit desperate so please be patient with me.

Glendaglenden

Possible duplicate of: #1936425 – Newfeld

Answer 1

Drag+drop is hidden on the PictureBox control. Not sure why, it works just fine. The probable guidance here is that it will not be obvious to the user that you could drop an image on the control. You'll have to do something about that, at least set the BackColor property to a non-default value so the user can see it.

Anyhoo, you'll need to implement the MouseDown event on the first picturebox so you can click it and start dragging:

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
        var img = pictureBox1.Image;
        if (img == null) return;
        if (DoDragDrop(img, DragDropEffects.Move) == DragDropEffects.Move) {
            pictureBox1.Image = null;
        }
    }

I assumed you wanted to move the image, tweak if necessary if copying was intended. Then you'll have to implement the DragEnter and DragDrop events on the second picturebox. Since the properties are hidden, you should set them in the form's constructor. Like this:

    public Form1() {
        InitializeComponent();
        pictureBox1.MouseDown += pictureBox1_MouseDown;
        pictureBox2.AllowDrop = true;
        pictureBox2.DragEnter += pictureBox2_DragEnter;
        pictureBox2.DragDrop += pictureBox2_DragDrop;
    }

    void pictureBox2_DragEnter(object sender, DragEventArgs e) {
        if (e.Data.GetDataPresent(DataFormats.Bitmap))
            e.Effect = DragDropEffects.Move;
    }

    void pictureBox2_DragDrop(object sender, DragEventArgs e) {
        var bmp = (Bitmap)e.Data.GetData(DataFormats.Bitmap);
        pictureBox2.Image = bmp;
    }

This does allow you to drag an image from another application into the box. Let's call it a feature. Use a bool flag if you want to disallow this.

Morula

if (img == null) return; what does the return in this line do? Im sorry it's just that's it practically my first time programming – Glendaglenden

It stops the code from crashing when the user clicks on a picture box that doesn't have an image. – Morula

Answer 2

Hans's answer led me to the correct solution. The problem with that answer is that putting DoDragDrop inside MouseDown will prevent MouseClick events from firing.

Here's my solution:

private void PictureBox_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        var pb = (PictureBox)sender;
        if (pb.BackgroundImage != null)
        {
            pb.DoDragDrop(pb, DragDropEffects.Move);
        }
    }
}

private void PictureBox_DragEnter (object sender, DragEventArgs e)
{
    e.Effect = DragDropEffects.Move;
}

private void PictureBox_DragDrop (object sender, DragEventArgs e)
{
    var target = (PictureBox)sender;
    if (e.Data.GetDataPresent(typeof(PictureBox)))
    {
        var source = (PictureBox)e.Data.GetData(typeof(PictureBox));
        if (source != target)
        {
            // You can swap the images out, replace the target image, etc.
            SwapImages(source, target);
        }
    }
}

Full working example on my GitHub.

Junk

Answer 3

You can use mouse enter and leave events to do this easily. For example you have two picture boxes pictureBox1 and pictureBox2. And you want to drag the image from picture box1 and drop it onto picture box2 do somthing like this.

private void pictureBox2_MouseUp(object sender, MouseEventArgs e)
{
    if (a == 1)
    {
        pictureBox1.Image = pictureBox2.Image;
        a = 0;
    }
}

private void pictureBox1_MouseEnter(object sender, EventArgs e)
{
    a = 1;
}

Where 'a' is just a lock or key which checks whether the mouse has entered the control on which we want to drop this image on. Hope it helped, worked for me.

Bourque

Answer 4

1. You can't set AllowDrop on PictureBox...set it for your whole form.

Code Snippet

Form1.AllowDrop = true;

2. Use the Form DragEnter, DragDrop events, they will work even if you drop it over the pictureBox.

private void Form1_DragEnter(object sender, DragEventArgs e)

{

e.Effect = DragDropEffects.Move;

}

private void Form1_DragDrop(object sender, DragEventArgs e)

{

int x = this.PointToClient(new Point(e.X, e.Y)).X;

int y = this.PointToClient(new Point(e.X, e.Y)).Y;

if(x >= pictureBox1.Location.X && x <= pictureBox1.Location.X + pictureBox1.Width && y >= pictureBox1.Location.Y && y <= pictureBox1.Location.Y + pictureBox1.Height)

{

    string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);

    pictureBox1.Image = Image.FromFile(files[0]);

}

}

Tomcat