How to drag and drop one image in a picture box on top of another in another picturebox in C#?

Question

I have two pictureboxes in my Windows Forms Application. Each of these pictureboxes hold an image. pictureBox1 is small, only 122 x 52, and pictureBox2 is much larger (459 x 566). What I want to do is be able to drag-and-drop the image of picturebox1 onto picturebox2 and a new image will be created and saved. Whereever x&y coordinates I place pictureBox1's image, it will "stamp" it right at that location in pictureBox2. And then pictureBox2's image will be modified and saved. So simply by dragging-and-dropping, the user should be able to "stamp" images onto pictureBox2 easily. Is this possible?

Answer 1

Mr Snrub,

If you use drag drop, you are in control of what you wish to do. Generally, in the MouseDown event of the control you determine whether a dragevent is starting or not. I keep a form property.

private Point _mouseDownPoint;

I set that in the drag from control during MouseDown

    protected override void OnMouseDown(MouseEventArgs e)
    {
        _mouseDownPoint = e.Location;
    }

In the OnMouseMove event for that same control. This code ensures that the user is most likely trying to drag and begins the dragdrop. This code comes from a usercontrol, so the this in the DoDragDrop may have to be changed in your case.

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);
        if (e.Button != MouseButtons.Left) return;
        var dx = e.X - _mouseDownPoint.X;
        var dy = e.Y - _mouseDownPoint.Y;
        if (Math.Abs(dx) > SystemInformation.DoubleClickSize.Width || Math.Abs(dy) > SystemInformation.DoubleClickSize.Height)
        {
            DoDragDrop(this, DragDropEffects.Move);
        }
    }

Your control(s) which may receive the drop should have their DragEnter events coded. Here we have a DragEnter event that differentiates between a ToolStripButton and a custom UserControl DSDPicBox. Controls without a DragEnter event coded will display the noDrop Icon when dragged over.

    private void Control_DragEnter(object sender, DragEventArgs e)
    {
        var button = e.Data.GetData(typeof(ToolStripButton)) as ToolStripButton;
        if (button != null)
        {
            e.Effect = DragDropEffects.Copy;
            return;
        }
        var element = e.Data.GetData(typeof(DSDPicBox)) as DSDPicBox;
        if (element == null) return;
        e.Effect = DragDropEffects.Move;
    }

And lastly, you must handle the drop. the panelDropPoint is the coordinates of where the item was dropped. You could use that to position your new graphic in the old one. You will have to render the picture at the new resolution if you are changing its size.

    private void panel_DragDrop(object sender, DragEventArgs e)
    {
        // Test to see where we are dropping. Sender will be control on which you dropped
        var panelDropPoint = sender.PointToClient(new Point(e.X, e.Y));
        var panelItem = sender.GetChildAtPoint(panelDropPoint);
        _insertionPoint = panelItem == null ? destination.Controls.Count : destination.Controls.GetChildIndex(panelItem, false);

        var whodat = e.Data.GetData(typeof(ToolStripButton)) as ToolStripButton;

        if (whodat != null)
        {
            //Dropping from a primitive button
            _dropped = true;
            whodat.PerformClick();
            return;
        }

      }

I have removed a few items from the code that would just muddy the waters. This code may not work out of the box, but should get you closer.

Regards, Marc