how to enlarge image in picturebox in vb.net

Question

I want to design visual match the pairs. There will be two columns. The left column will have images and the right one will have word labels. User have to drag image over the correct label.

Since the form size is small, images will have to be smaller (thumbnails). So there should also be image enlargement when user hovers mouse over the image. The user should also still be able to do a basic drag-and-drop of the image.

So how do I achieve both of these things?

1. Drag-and-drop picturebox to label

2. Picturebox image enlargement?

Answer 1

1) Drag and Drop PictureBox to Label:

First, you must set the AllowDrop property of the label to True (can also be done in designer):

Label.AllowDrop = True

Handle PictureBox.MouseDown to activate DragDrop:

 Private Sub PictureBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
                               Handles PictureBox1.MouseDown

    PictureBox1.DoDragDrop(PictureBox1, DragDropEffects.All)

End Sub

Now, handle the DragEnter and DragDrop events of the Label:

Private Sub Label1_DragDrop(ByVal sender As Object, _
           ByVal e As System.Windows.Forms.DragEventArgs) Handles Label1.DragDrop

    'Get the data being dropped from e.Data and do something.

End Sub

Private Sub Label1_DragEnter(ByVal sender As Object, _
          ByVal e As System.Windows.Forms.DragEventArgs) Handles Label1.DragEnter

    'e.Effect controls what type of DragDrop operations are allowed on the label.
    'You can also check the type of data that is being dropped on the label here
    'by checking e.Data.

    e.Effect = DragDropEffects.All
End Sub

2)Enlarge the PictureBox on MouseOver:

Create a new Form with only a PictureBox on it. This is the form we will show when we want to show an enlarged image, lets call it Form2. Now simply handle the MouseHover event of the thumbnail picture box:

 Private Sub PictureBox1_MouseHover(ByVal sender As Object, _
                   ByVal e As System.EventArgs) Handles PictureBox1.MouseHover

    'PictureBox1 is the thumbnail on the original form.
    'PictureBox2 is the full size image on the popup form.

    Form2.PictureBox2.ClientSize = PictureBox1.Image.Size
    Form2.PictureBox2.Image = CType(PictureBox1.Image.Clone, Image)
    Form2.ShowDialog()

End Sub

You will need to play around with how you want to dispose of the popup form.