Creating an application that is able to drag and drop

[nick753]

Hey, I am trying to create and application that has a section on the left of the form that has about 8-10 smallish images in it. The user can then drag the images one at a time from the box of images and create his own model/diagram.
can you guys point me in the right direction on how to implement this? I am going to be doing more with the application, but I need to just start by accomplishing this. Thanks

[Shaggy Hiker]

Take a look at the link in JMCs signature. He posted a thread in the codebank that covers lots of aspects of drag and drop. It's a good place to start when getting into the subject. Aside from that, I think we would probably need much more information to be able to suggest anything useful. For instance, are the images all the same size? Is the target area a grid, or can the items be placed arbitrarily? And so on.

[nick753]

Okay, I got my application to be able to drag and drop from one picture box to another, But how about from a picture box to just anywhere in my "drawing area"? Also, what control should I use? I am thinking of just a panel, or groupbox? Here is the code for picture box 2 that allows an item to be dropped there. But for me, I need my images to be dropped in a groupbox or panel (unless there are better ideas), how can I modify it to be able to drop any picture anywhere in my drawing area?

Private Sub PictureBox2_DragDrop(ByVal sender As Object, ByVal e As _
System.Windows.Forms.DragEventArgs) Handles PictureBox2.DragDrop
    ' Assign the image to the PictureBox.
    PictureBox2.Image = e.Data.GetData(DataFormats.Bitmap)
    ' If the CTRL key is not pressed, delete the source picture.
    If Not e.KeyState = 8 Then
        PictureBox1.Image = Nothing
    End If

[.paul.]

try this:

[nick753]

try this:

I can't open it, it cannot find the path specified.

[nick753]

Can anyone here help me to drag a image from imagebox and then drop it anywhere in a container such as a groupbox or panel?

[.paul.]

I can't open it, it cannot find the path specified.

you are using vb2008?
extract the archive to a new directory on your hd + then doubleclick the .sln file. i know it works, i've tested it

[nick753]

you are using vb2008?
extract the archive to a new directory on your hd + then doubleclick the .sln file. i know it works, i've tested it

I am actually using VS 2008 Express. I don't know if that would have something to do with it?

[.paul.]

no. that would work

[nick753]

I get 6 errors that all look similar to this.

Error 1 Unable to open module file 'C:\Users\Nick\AppData\Local\Temp\Temp2_dragdrop images.zip\dragdrop images\Form1.Designer.vb': The system cannot find the file specified. C:\Users\Nick\AppData\Local\Temp\Temp2_dragdrop images.zip\dragdrop images\Form1.Designer.vb 1 1 dragdrop images

[.paul.]

strange. i checked the zip archive + extracted it to a new folder on my desktop + it worked ok. try that...

[nick753]

It worked! Thanks, I'm going to check it out and i'll come back with questions/comments

[nick753]

Holy cow, almost all of that is way over my head! Is that the easiest way? One more thing, once the picture is dropped in panel, you can't move it again. What is the easiest way to correct that?

[.paul.]

use this:

Private Sub Panel1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Panel1.DragDrop
    If e.Data.GetDataPresent(DataFormats.Bitmap) Then
        Dim pb As New PictureBox With {.SizeMode = PictureBoxSizeMode.Normal, _
        .Size = DirectCast(e.Data.GetData(DataFormats.Bitmap), Bitmap).Size, _
        .Image = DirectCast(e.Data.GetData(DataFormats.Bitmap), Bitmap), _
        .Location = Panel1.PointToClient(New Point(e.X, e.Y)), _
        .allowdrop = True}
        Me.Panel1.Controls.Add(pb)
        pb.BringToFront()
        AddHandler pb.DragOver, AddressOf PictureBoxes_DragOver
        AddHandler pb.MouseDown, AddressOf PictureBoxes_MouseDown
        AddHandler pb.GiveFeedback, AddressOf PictureBoxes_giveFeedback
        If Not e.KeyState = 8 Then
            source.Dispose()
        End If
    End If
End Sub

[.paul.]

Is that the easiest way?

it's easier without the cursor effects

[nick753]

Thanks, but now I need to let thew user add information about each picture in the drawing. I need the user to double click an image and then a form(?) pops up and has a 3-5 text boxes so that the user can add info about that picture. However, when I add a inputbox to an images doubleclick, or mouse double click event, nothing happens when I double click the image either after I have dragged and dropped it, or before. Do you know why this is? Also since the user needs to be able to add more than one piece of info about each image, is the best thing to do is to have a form pop up with multiple text boxes? Or is there a way to have an input box with more than one textbox??

[.paul.]

add a handler for the mouseup event + use that event to show a custom dialog which btw you'll have to design yourself

[nick753]

add a handler for the mouseup event + use that event to show a custom dialog which btw you'll have to design yourself

What do you mean add a handle for the mouse up? What's a handler? And, why doesn't the doubleclick work?

[.paul.]

the pictureboxes are created dynamically at runtime + we use addhandler to add events:

AddHandler pb.DragOver, AddressOf PictureBoxes_DragOver
AddHandler pb.MouseDown, AddressOf PictureBoxes_MouseDown
AddHandler pb.GiveFeedback, AddressOf PictureBoxes_giveFeedback

so to include a doubleclick handler:

AddHandler pb.DoubleClick, AddressOf PictureBoxes_DoubleClick

Private Sub PictureBoxes_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs)
    'show your custom dialog
End Sub

[nick753]

so to include a doubleclick handler:

AddHandler pb.DoubleClick, AddressOf PictureBoxes_DoubleClick

Private Sub PictureBoxes_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs)
    'show your custom dialog
End Sub

So do I need both of these? I tried the second method and it did not work. So is what you are saying is that you need to add the first method to be able to do the second method?

[.paul.]

yes. put the first line after the other addhandlers in the previous code

[nick753]

Still can't get the doubleclick to work. I have tried your code that you provided and it did not work. I also tried this

AddHandler pb.DoubleClick, AddressOf PictureBox1_DoubleClick

    Private Sub PictureBox1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles PictureBox1.DoubleClick
        MessageBox.Show("HEy")
    End Sub

Thinking that maybe I could do each picturebox separately, but the method I tried isn't working either. Any other ideas?

[.paul.]

try this:

Imports System.Runtime.InteropServices
 
Public Class Form1
 
    Private Declare Function GetDoubleClickTime Lib "user32" () As Integer
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        PictureBox1.AllowDrop = True
        PictureBox2.AllowDrop = True
        PictureBox3.AllowDrop = True
        PictureBox4.AllowDrop = True
        PictureBox5.AllowDrop = True
        PictureBox6.AllowDrop = True
        PictureBox7.AllowDrop = True
        PictureBox8.AllowDrop = True
    End Sub
 
    Private Sub Panel1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Panel1.DragDrop
        If e.Data.GetDataPresent(DataFormats.Bitmap) Then
            Dim pb As New PictureBox With {.SizeMode = PictureBoxSizeMode.Normal, _
            .Size = DirectCast(e.Data.GetData(DataFormats.Bitmap), Bitmap).Size, _
            .Image = DirectCast(e.Data.GetData(DataFormats.Bitmap), Bitmap), _
            .Location = Panel1.PointToClient(New Point(e.X, e.Y)), _
            .allowdrop = True, _
            .Tag = Environment.TickCount}
            Me.Panel1.Controls.Add(pb)
            pb.BringToFront()
            AddHandler pb.DragOver, AddressOf PictureBoxes_DragOver
            AddHandler pb.MouseDown, AddressOf PictureBoxes_MouseDown
            AddHandler pb.GiveFeedback, AddressOf PictureBoxes_giveFeedback
            If Not e.KeyState = 8 Then
                source.Dispose()
            End If
        End If
    End Sub
 
    Private Sub PictureBoxes_DragOver(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles PictureBox1.DragOver, PictureBox2.DragOver, PictureBox3.DragOver, PictureBox4.DragOver, PictureBox5.DragOver, PictureBox6.DragOver, PictureBox7.DragOver, PictureBox8.DragOver, Panel1.DragOver
        'make sure drag drop data can be used
        If e.Data.GetDataPresent(DataFormats.Bitmap) And e.AllowedEffect = DragDropEffects.Move Then
            e.Effect = DragDropEffects.Move
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub
 
    Dim source As PictureBox
    Dim image As Bitmap
 
    Private Sub PictureBoxes_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown, PictureBox2.MouseDown, PictureBox3.MouseDown, PictureBox4.MouseDown, PictureBox5.MouseDown, PictureBox6.MouseDown, PictureBox7.MouseDown, PictureBox8.MouseDown
        source = DirectCast(sender, PictureBox)
        If Environment.TickCount - CInt(source.Tag) < GetDoubleClickTime Then
            MsgBox("heyhey")
        End If
        source.Tag = Environment.TickCount
        image = DirectCast(source.Image.Clone, Bitmap)
        source.DoDragDrop(image, DragDropEffects.Move)
    End Sub
 
    Public Sub PictureBoxes_giveFeedback(ByVal sender As Object, ByVal e As System.Windows.Forms.GiveFeedbackEventArgs) Handles PictureBox1.GiveFeedback, PictureBox2.GiveFeedback, PictureBox3.GiveFeedback, PictureBox4.GiveFeedback, PictureBox5.GiveFeedback, PictureBox6.GiveFeedback, PictureBox7.GiveFeedback, PictureBox8.GiveFeedback, Panel1.GiveFeedback
        e.UseDefaultCursors = False
        Dim EffectCursor As New Cursor(New IO.MemoryStream(My.Resources.Move))
        Dim img As New Bitmap(15 + image.Width, 26 + image.Height)
        Dim gr As Graphics = Graphics.FromImage(img)
        gr.FillRectangle(Brushes.Magenta, img.GetBounds(Drawing.GraphicsUnit.Pixel))
        EffectCursor.Draw(gr, New Rectangle(0, 0, _
            EffectCursor.Size.Width, EffectCursor.Size.Height))
        gr.DrawImage(image, 15, 26, image.Width, image.Height)
        img.MakeTransparent(Color.Magenta)
        Cursor.Current = CreateCursor(img)
    End Sub
 
#Region "   CreateIconIndirect"
 
    Private Structure IconInfo
        Public fIcon As Boolean
        Public xHotspot As Int32
        Public yHotspot As Int32
        Public hbmMask As IntPtr
        Public hbmColor As IntPtr
    End Structure
 
    <DllImport("user32.dll", EntryPoint:="CreateIconIndirect")> _
    Private Shared Function CreateIconIndirect(ByVal iconInfo As IntPtr) As IntPtr
    End Function
 
    <DllImport("user32.dll", CharSet:=CharSet.Auto)> _
    Public Shared Function DestroyIcon(ByVal handle As IntPtr) As Boolean
    End Function
 
    <DllImport("gdi32.dll")> _
    Public Shared Function DeleteObject(ByVal hObject As IntPtr) As Boolean
    End Function
 
    ''' <summary>
    ''' CreateCursor
    ''' </summary>
    ''' <param name="bmp"></param>
    ''' <returns>custom Cursor</returns>
    ''' <remarks>creates a custom cursor from a bitmap</remarks>
    Public Function CreateCursor(ByVal bmp As Bitmap) As Cursor
        'Setup the Cursors IconInfo
        Dim tmp As New IconInfo
        tmp.xHotspot = 0
        tmp.yHotspot = 0
        tmp.fIcon = False
        tmp.hbmMask = bmp.GetHbitmap()
        tmp.hbmColor = bmp.GetHbitmap()
 
        'Create the Pointer for the Cursor Icon
        Dim pnt As IntPtr = Marshal.AllocHGlobal(Marshal.SizeOf(tmp))
        Marshal.StructureToPtr(tmp, pnt, True)
        Dim curPtr As IntPtr = CreateIconIndirect(pnt)
 
        'Clean Up
        DestroyIcon(pnt)
        DeleteObject(tmp.hbmMask)
        DeleteObject(tmp.hbmColor)
 
        Return New Cursor(curPtr)
    End Function
 
#End Region
 
End Class

[nick753]

Can you tell me why this isn't working or how i can fix this?

[.paul.]

the code in post #23 works ok

[nick753]

Can you tell me what you did to fix it? What is the private declare function? I don;t see it being used anywhere is it?

[.paul.]

GetDoubleClickTime? it is used in line 51 to measure the click speed to catch a doubleclick

[nick753]

Wow, how did you learn all this?

[.paul.]

years of experience, + this forum, msdn, + google

[nick753]

Okay now, in your opinion, can you tell me what would be the best way to collect like 5 pieces of data from each picture dropped? I was thinking of when you double click a image, a new form opens up with the appropriate number of text boxes that the user needs to enter the data into. Is there a better option for doing this? I tried searching google but didn't find much because I didn't know really what to search for!

[nick753]

Any good ideas?