Title: Drag and drop images with a preview in C#

The example Drag and drop images in C# explains how to drag and drop images. See that example for the basic ideas. (Pay special attention to the second paragraph, which discusses the AllowDrop property for the PictureBox control.)

This example adds a preview to the drop. When you drag an image over the drop target, it displays a grayed out version of the image.

When you right-click on a drag source PictureBox, the following code starts the drag.

// Start the drag. private void picDragSource_MouseDown(object sender, MouseEventArgs e) { // Start the drag if it's the right mouse button. if (e.Button == MouseButtons.Right) { PictureBox source = sender as PictureBox; picDragSource.DoDragDrop(source.Image, DragDropEffects.Copy); } }

This code calls DoDragDrop to start the drag, passing it the image to drag.

When the drag moves over the drop target, the following code executes.

// The current image during a drag. private Image OldImage = null; // Allow a copy of an image. private void picDropTarget_DragEnter(object sender, DragEventArgs e) { // See if this is a copy and the data includes an image. if (e.Data.GetDataPresent(DataFormats.Bitmap) && (e.AllowedEffect & DragDropEffects.Copy) != 0) { // Allow this. e.Effect = DragDropEffects.Copy; // Save the current image. OldImage = picDropTarget.Image; // Display the preview image. Bitmap bm = (Bitmap)e.Data.GetData(DataFormats.Bitmap, true); Bitmap copy_bm = (Bitmap)bm.Clone(); using (Graphics gr = Graphics.FromImage(copy_bm)) { // Cover with translucent white. using (SolidBrush br = new SolidBrush(Color.FromArgb(128, 255, 255, 255))) { gr.FillRectangle(br, 0, 0, bm.Width, bm.Height); } } picDropTarget.Image = copy_bm; } else { // Don't allow any other drop. e.Effect = DragDropEffects.None; } }

If bitmap data is present and this is a copy operation, the code allows the copy. It saves the drop target's current image in the variable OldImage. It makes a copy of the dragged image and draws a translucent white rectangle over it to make it lighter. It then displays the preview image in the drop target PictureBox. The PictureBox has SizeMode set to AutoSize so the control automatically resizes itself to fit the preview image.

If the drag leaves the drop target, the following code executes.

// Remove the drag enter image. private void picDropTarget_DragLeave(object sender, EventArgs e) { // Restore the saved image. picDropTarget.Image = OldImage; }

This code restores the drop target's original image so the preview image is no longer visible.

Finally, if the user drops on the target, the following code executes.

// Accept the drop. private void picDropTarget_DragDrop(object sender, DragEventArgs e) { Bitmap bm = (Bitmap)e.Data.GetData(DataFormats.Bitmap, true); picDropTarget.Image = bm; }

This code displays the dropped image.

At one point, in an earlier version of Windows, the program flickered when you dragged images of different sizes over the control. If that happens on your system, try setting the drop target's AutoSize property to Normal and then sizing the control to fit its image yourself in code.

With a little extra work, you could drag the image to a specific position on the drop target. In that case, you could display a preview of the image in its new position.

Download the example to experiment with it and to see additional details.