Drag and drop images while displaying 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.)

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. It then 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.

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.

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.Size = bm.Size;
picDropTarget.Image = bm;
}

This code displays the dropped image and makes the PictureBox fit the image.

Initially I set the drop target's AutoSize property to AutoSize so it would fit the image. This caused some weird flickering problems when you dragged images of different sizes over the control. Give it a try and see. This version is much better.

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.

  

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this post.
Comments
  • No comments exist for this post.
Leave a comment

Submitted comments are subject to moderation before being displayed.

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.