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
C#
public Form1()
{
InitializeComponent();
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);
}
VB.NET
Public Sub New()
InitializeComponent()
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
End Sub
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:
C#
private void btnImage_MouseDown(object sender, MouseEventArgs e)
{
Button btnPic = (Button)sender;
btnPic.DoDragDrop(btnPic.Image, DragDropEffects.Copy);
}
private void pictureBox_DragEnter(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(DataFormats.Bitmap))
{
e.Effect = DragDropEffects.Copy;
}
else
{
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));
}
VB.NET
Private Sub btnImage_MouseDown(ByVal sender As Object, ByVal e As MouseEventArgs)
Dim btnPic As Button = CType(sender, Button)
btnPic.DoDragDrop(btnPic.Image, DragDropEffects.Copy)
End Sub
Private Sub pictureBox_DragEnter(ByVal sender As Object, ByVal e As DragEventArgs)
If e.Data.GetDataPresent(DataFormats.Bitmap) Then
e.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.None
End If
End Sub
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))
End Sub
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.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!