Drag and Drop Images Into a PictureBox
This article was written simply out of curiosity. I was doing a similar operation using web technologies and just wanted to try out how it works with Windows Forms. I have recorded the steps in this short article, where we will explore how to drag and drop images into a PictureBox.
Step 1: Open Visual Studio > File > New > Project. In the Project Types pane, choose the language of your choice (Visual C# or Visual Basic). In the Templates pane, choose Windows Application. Choose a name and location for the project and click OK.
Step 2: Now Drag and drop a Button(btnImage) control and a PictureBox(picBox) control to the form. We will first add an image to the Button and then at runtime, drag and drop that image from the Button to the PictureBox. You can try out the same with other controls as well that support the image property.
Now if we need to verbally describe how the entire drag drop process is going to occur, then here it is. The user will move the mouse pointer over the button, press it and then instead of just releasing the mouse, the user will drag the image over to the PictureBox. The following events need to be handled.
Button MouseDown Event – which will be handled when the mouse pointer is over the Button and a mouse button is pressed.
PictureBox DragEnter Event – this event will be handled when the Picture is dragged into the PictureBox’s bounds.
PictureBox DragDrop Event - Occurs when a drag-and-drop operation is completed.
Step 3: With these inputs, let us move ahead and add some code to our form. In the Form1.cs or Form1.vb, add the following code in the constructor of the Form
Image img = Image.FromFile(@"C:\pics\1.jpg");
this.btnImage.Image = img;
this.picBox.AllowDrop = true;
this.btnImage.MouseDown += new System.Windows.Forms.MouseEventHandler(this. btnImage_MouseDown);
this.picBox.DragDrop += new System.Windows.Forms.DragEventHandler(this.pictureBox_DragDrop);
this.picBox.DragEnter += new System.Windows.Forms.DragEventHandler(this.pictureBox_DragEnter);
Public Sub New()
Dim img As Image = Image.FromFile("C:\pics\1.jpg")
Me.btnImage.Image = img
Me.picBox.AllowDrop = True
AddHandler btnImage.MouseDown, AddressOf btnImage _MouseDown
AddHandler picBox.DragDrop, AddressOf pictureBox_DragDrop
AddHandler picBox.DragEnter, AddressOf pictureBox_DragEnter
In the code above, we added an image to the Button and also registered the events for the PictureBox and Button.
Step 4: Moving ahead, we will now add code to the respective events discussed above:
private void btnImage_MouseDown(object sender, MouseEventArgs e)
Button btnPic = (Button)sender;
private void pictureBox_DragEnter(object sender, DragEventArgs e)
e.Effect = DragDropEffects.Copy;
e.Effect = DragDropEffects.None;
private void pictureBox_DragDrop(object sender, DragEventArgs e)
PictureBox picbox = (PictureBox)sender;
Graphics g = picbox.CreateGraphics();
g.DrawImage((Image)e.Data.GetData(DataFormats.Bitmap), new Point(0, 0));
Private Sub btnImage_MouseDown(ByVal sender As Object, ByVal e As MouseEventArgs)
Dim btnPic As Button = CType(sender, Button)
Private Sub pictureBox_DragEnter(ByVal sender As Object, ByVal e As DragEventArgs)
If e.Data.GetDataPresent(DataFormats.Bitmap) Then
e.Effect = DragDropEffects.Copy
e.Effect = DragDropEffects.None
Private Sub pictureBox_DragDrop(ByVal sender As Object, ByVal e As DragEventArgs)
Dim picbox As PictureBox = CType(sender, PictureBox)
Dim g As Graphics = picbox.CreateGraphics()
g.DrawImage(CType(e.Data.GetData(DataFormats.Bitmap), Image), New Point(0, 0))
In the btnImage_MouseDown event, we call the DoDragDrop method on the sender. This method begins a drag and drop operation and accepts a parameter of the object that is being dragged and the effect of a drag drop, as the second parameter.
In the pictureBox_DragEnter we check whether the specified data type(Bitmap) exists in the object. This method is called before GetData().
Finally in the pictureBox_DragDrop we call the DrawImage() which accepts the specified image and the specified location and draws the portion of the image on the PictureBox.
That’s it. Run the sample and you will be able to perform drag drop operations on the PictureBox. I hope this article was useful and I thank you for viewing it.