none
drag and drop of pictures RRS feed

  • Question

  • Hi Everyone:

    I am using VB.net 2019.  I have several pictureboxes, with arrows in them (up arrow, left arrow, etc.). Now, I want the user to click on a picturebox, and drag it to picturebox10 (the target). This is similar to a simple drag and drop, which I know how to do as there were many examples on the internet. However, I do not want to do an exact drag and drop. Here is what I want.

    1- When the user drops (let go of the mouse), record the coordinates (x, y) of where it was dropped

    2- Erase arrows 1 and 2 (if they exist), and not the underlying picture

    3- At the coordinates (x, y), draw a new arrow

    my biggest problem is I do not know how to erase the arrows without erasing the underlying picture, and also, I do not know in which event procedure I have to put the drawing of the new arrow.  I tried it in the Paint event, but in this event, it always draws the arrow, no matter what.

    I would appreciate the code for this. 

    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    Public Class Form1
        Private Sub Form1_Load(ByVal sender As Object,
            ByVal e As System.EventArgs) Handles MyBase.Load
    
            Me.AllowDrop = True
            PictureBox2.AllowDrop = True
    
        End Sub
    
        Private Sub PictureBox2_DragDrop(ByVal sender As Object,
        ByVal e As System.Windows.Forms.DragEventArgs) Handles PictureBox2.DragDrop
    
            PictureBox2.Image = e.Data.GetData(DataFormats.Bitmap)
    
        End Sub
    
        Private Sub PictureBox2_DragEnter(ByVal sender As Object,
            ByVal e As System.Windows.Forms.DragEventArgs) Handles PictureBox2.DragEnter
    
            ' See if the data includes a Bitmap.
            If e.Data.GetDataPresent(GetType(Bitmap)) Then
                ' There is Bitmap data. Allow copy.
                e.Effect = DragDropEffects.Copy
            Else
                ' There is no Bitmap. Prohibit drop.
                e.Effect = DragDropEffects.None
            End If
    
        End Sub
    
        Private Sub PictureBox1_MouseDown(ByVal sender As Object,
            ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
    
            PictureBox1.DoDragDrop(PictureBox1.Image, DragDropEffects.Copy)
            'PictureBox2.DoDragDrop(sender, DragDropEffects.Copy)
    
        End Sub
    
    
        Private Sub PictureBox3_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox3.Paint
            Dim pen As New Pen(Color.FromArgb(255, 0, 0, 255), 8)
            pen.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor
            pen.EndCap = System.Drawing.Drawing2D.LineCap.RoundAnchor
            e.Graphics.DrawLine(pen, 20, 175, 300, 175)
    
        End Sub
    End Class
    

    Sunday, June 2, 2019 7:31 PM

Answers

  • Hi Bob,

    I've made a sample.
        
    [code]
    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    Public Class Form1
    	Private myAngle As Integer
    	' ---
    	Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
    		Me.AllowDrop = True
    		Me.PictureBox10.AllowDrop = True
    	End Sub
    	' --- MouseDown: PictureBox 1-4 (dragging source) 
    	Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox1.MouseDown
    		Me.myAngle = 0
    		PictureBox1.DoDragDrop(PictureBox1.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox2_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox2.MouseDown
    		Me.myAngle = 90
    		PictureBox2.DoDragDrop(PictureBox2.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox3_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox3.MouseDown
    		Me.myAngle = 180
    		PictureBox3.DoDragDrop(PictureBox3.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox4_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox4.MouseDown
    		Me.myAngle = 270
    		PictureBox4.DoDragDrop(PictureBox4.BackgroundImage, DragDropEffects.All)
    	End Sub
    	' ---
    	Private Sub PictureBox10_DragEnter(ByVal sender As Object, ByVal e As DragEventArgs) _
    		Handles PictureBox10.DragEnter, MyBase.DragDrop
    		' ---
    		If e.Data.GetDataPresent(GetType(Bitmap)) Then
    			e.Effect = DragDropEffects.Copy
    		Else
    			e.Effect = DragDropEffects.None
    		End If
    	End Sub
    	Private Sub PictureBox10_DragDrop(ByVal sender As Object, ByVal e As DragEventArgs) _
    		Handles PictureBox10.DragDrop
    		' ---[commented]
    		'Me.PictureBox10.Image = Nothing
    		'Me.PictureBox_Target.Image = e.Data.GetData(DataFormats.Bitmap)
    		' ---
    		Me.PictureBox10.Refresh()  ' -- fire Paint event
    	End Sub
    	' --- Draw Line by Pen
    	Private Sub PictureBox10_Paint(sender As Object, e As PaintEventArgs) _
    		Handles PictureBox10.Paint
    		' ---
    		Dim pen As New Pen(Color.Red, 8)
    		pen.StartCap = System.Drawing.Drawing2D.LineCap.RoundAnchor
    		pen.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor
    		' ---
    		Dim XStart As Integer = Me.PointToClient(Control.MousePosition).X - Me.PictureBox10.Left
    		Dim YStart As Integer = Me.PointToClient(Control.MousePosition).Y - Me.PictureBox10.Top
    		Dim XEnd, YEnd As Integer
    		Dim penLength As Integer = 50
    		Select Case Me.myAngle
    			Case = 0
    				XEnd = XStart
    				YEnd = YStart - penLength
    			Case = 90
    				XEnd = XStart + penLength
    				YEnd = YStart
    			Case = 180
    				XEnd = XStart
    				YEnd = YStart + penLength
    			Case = 270
    				XEnd = XStart - penLength
    				YEnd = YStart
    		End Select
    		' ---
    		e.Graphics.DrawLine(pen, XStart, YStart, XEnd, YEnd)
    		' ---
    		Me.lbl_X.Text = "X = " & XStart.ToString
    		Me.lbl_Y.Text = "Y = " & YStart.ToString
    	End Sub
    End Class
    [remarks]
    1. switch ArrowAnchor and RoundAnchor
    2. calculate mouse position in PictureBox10
    3. fire Paint event in PictureBox10.DragDrop by "Refresh"
    4. describe pen's behavior in PictureBox10.Paint event

    I hope this will help you.

    Regards,

    Ashidacchi -- https://ssl01.rocketnet.jp/hokusosha.com/default.html


    • Edited by Ashidacchi Thursday, June 6, 2019 12:53 AM
    • Marked as answer by booboo_US Friday, June 7, 2019 1:36 AM
    Thursday, June 6, 2019 12:48 AM

All replies

  • Hi booboo_US,

    I'm not sure if I can understand your exact needs. 
    This is my sample.
        

    Here's code:
    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    Public Class Form1
    	Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
    		Me.AllowDrop = True
    		Me.PictureBox_Target.AllowDrop = True
    	End Sub
    	' --- MouseDown: PictureBox 1-4 (dragging source) 
    	Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox1.MouseDown
    		PictureBox1.DoDragDrop(PictureBox1.Image, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox2_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox2.MouseDown
    		PictureBox2.DoDragDrop(PictureBox2.Image, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox3_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox3.MouseDown
    		PictureBox3.DoDragDrop(PictureBox3.Image, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox4_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox4.MouseDown
    		PictureBox4.DoDragDrop(PictureBox4.Image, DragDropEffects.All)
    	End Sub
    	' ---
    	Private Sub PictureBox_DragEnter(ByVal sender As Object, ByVal e As DragEventArgs) _
    		Handles PictureBox_Target.DragEnter
    		' ---
    		If e.Data.GetDataPresent(GetType(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) _
    		Handles PictureBox_Target.DragDrop
    		' ---
    		Me.PictureBox_Target.Image = Nothing
    		Me.PictureBox_Target.Image = e.Data.GetData(DataFormats.Bitmap)
    		' ---
    		Me.lbl_X.Text = "X: " & MousePosition.X
    		Me.lbl_Y.Text = "Y: " & MousePosition.Y
    	End Sub
    End Class

    Regards,

    Ashidacchi -- https://ssl01.rocketnet.jp/hokusosha.com/default.html


    • Edited by Ashidacchi Monday, June 3, 2019 12:01 AM
    Sunday, June 2, 2019 11:59 PM
  • Hi,

    I think you can put a panel

    Public Class Form1
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Me.AllowDrop = True
            Me.Panel1.AllowDrop = True
    
        End Sub
    
        Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox1.MouseDown
    
            PictureBox1.DoDragDrop(PictureBox1.Image, DragDropEffects.All)
        End Sub
        Private Sub PictureBox2_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox2.MouseDown
    
            PictureBox2.DoDragDrop(PictureBox2.Image, DragDropEffects.All)
        End Sub
        Private Sub PictureBox3_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox3.MouseDown
    
            PictureBox3.DoDragDrop(PictureBox3.Image, DragDropEffects.All)
        End Sub
        Private Sub PictureBox4_MouseDown(sender As Object, e As MouseEventArgs) Handles PictureBox4.MouseDown
    
            PictureBox4.DoDragDrop(PictureBox4.Image, DragDropEffects.All)
        End Sub
        Private Sub Panel1_DragDrop(sender As Object, e As DragEventArgs) Handles Panel1.DragDrop
            Me.Label1.Text = "X: " & Me.PointToClient(Control.MousePosition).X
            Me.Label2.Text = "Y: " & Me.PointToClient(Control.MousePosition).Y
            Panel1.Controls.Clear()
            Dim pic As PictureBox = New PictureBox With {.Location = New Point(Panel1.PointToClient(Control.MousePosition).X, Panel1.PointToClient(Control.MousePosition).Y)}
            Me.Panel1.Controls.Add(pic)
            pic.Image = e.Data.GetData(DataFormats.Bitmap)
        End Sub
    
        Private Sub Panel1_DragEnter(sender As Object, e As DragEventArgs) Handles Panel1.DragEnter
    
            If e.Data.GetDataPresent(GetType(Bitmap)) Then
                e.Effect = DragDropEffects.Copy
            Else
                e.Effect = DragDropEffects.None
            End If
        End Sub
    
        Private Sub Panel1_Paint(sender As Object, e As PaintEventArgs) Handles Panel1.Paint
            ControlPaint.DrawBorder(e.Graphics, Me.Panel1.ClientRectangle, Color.LightSeaGreen, 1, ButtonBorderStyle.Solid, Color.LightSeaGreen, 1, ButtonBorderStyle.Solid, Color.LightSeaGreen, 1, ButtonBorderStyle.Solid, Color.LightSeaGreen, 1, ButtonBorderStyle.Solid)
        End Sub
    End Class
    


    Best Regards,

    Alex


    MSDN Community Support Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, June 3, 2019 7:10 AM
  • Hi:

    Thank you.  No, this is not what I want.  When I drop the up arrow from picturebox1 onto picturebox2, I do not want to see the up arrow in picturebox2.  However, instead, I need to actually draw an arrow at some angle, using the pen and the drawline procedures, similar my PictureBox3_Paint event above.  Thanks.

    Bob 

    Monday, June 3, 2019 11:05 PM
  • Hi boogoo_US,

    I'm confused somewhat... 
    In your original post, you mention "picturebox10 (the target) ".  But in the second post, you refer to "Picturebox2" and "Picturebox3".
    I'm afraid you provide more clear description:
      What is/are a dragging object and what is a dropping one?
      How we decide angle of a drawing line and how long it is, and where it is drawn?
    Regards,

    Ashidacchi -- https://ssl01.rocketnet.jp/hokusosha.com/default.html

    Tuesday, June 4, 2019 3:50 AM
  • Hi Ashidacchi:

    Thank you for the reply.  I am sorry, I meant Picturebox10, and not Picturebox2.  So, I need to drag the picture from picturebox1 onto Picturebox10, and on Picturebox10, once I let go of the mouse, to physically draw an arrow at some angle using

            Dim pen As New Pen(Color.FromArgb(255, 0, 0, 255), 8)
            pen
    .StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor
            pen
    .EndCap = System.Drawing.Drawing2D.LineCap.RoundAnchor
            e
    .Graphics.DrawLine(pen, XStart, YStart, XEnd, YEnd)

    or something similar to this.  Thank you.

    Bob

    Wednesday, June 5, 2019 11:23 PM
  • Hi Bob,

    I've made a sample.
        
    [code]
    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    Public Class Form1
    	Private myAngle As Integer
    	' ---
    	Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
    		Me.AllowDrop = True
    		Me.PictureBox10.AllowDrop = True
    	End Sub
    	' --- MouseDown: PictureBox 1-4 (dragging source) 
    	Private Sub PictureBox1_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox1.MouseDown
    		Me.myAngle = 0
    		PictureBox1.DoDragDrop(PictureBox1.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox2_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox2.MouseDown
    		Me.myAngle = 90
    		PictureBox2.DoDragDrop(PictureBox2.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox3_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox3.MouseDown
    		Me.myAngle = 180
    		PictureBox3.DoDragDrop(PictureBox3.BackgroundImage, DragDropEffects.All)
    	End Sub
    	Private Sub PictureBox4_MouseDown(sender As Object, e As MouseEventArgs) _
    		Handles PictureBox4.MouseDown
    		Me.myAngle = 270
    		PictureBox4.DoDragDrop(PictureBox4.BackgroundImage, DragDropEffects.All)
    	End Sub
    	' ---
    	Private Sub PictureBox10_DragEnter(ByVal sender As Object, ByVal e As DragEventArgs) _
    		Handles PictureBox10.DragEnter, MyBase.DragDrop
    		' ---
    		If e.Data.GetDataPresent(GetType(Bitmap)) Then
    			e.Effect = DragDropEffects.Copy
    		Else
    			e.Effect = DragDropEffects.None
    		End If
    	End Sub
    	Private Sub PictureBox10_DragDrop(ByVal sender As Object, ByVal e As DragEventArgs) _
    		Handles PictureBox10.DragDrop
    		' ---[commented]
    		'Me.PictureBox10.Image = Nothing
    		'Me.PictureBox_Target.Image = e.Data.GetData(DataFormats.Bitmap)
    		' ---
    		Me.PictureBox10.Refresh()  ' -- fire Paint event
    	End Sub
    	' --- Draw Line by Pen
    	Private Sub PictureBox10_Paint(sender As Object, e As PaintEventArgs) _
    		Handles PictureBox10.Paint
    		' ---
    		Dim pen As New Pen(Color.Red, 8)
    		pen.StartCap = System.Drawing.Drawing2D.LineCap.RoundAnchor
    		pen.EndCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor
    		' ---
    		Dim XStart As Integer = Me.PointToClient(Control.MousePosition).X - Me.PictureBox10.Left
    		Dim YStart As Integer = Me.PointToClient(Control.MousePosition).Y - Me.PictureBox10.Top
    		Dim XEnd, YEnd As Integer
    		Dim penLength As Integer = 50
    		Select Case Me.myAngle
    			Case = 0
    				XEnd = XStart
    				YEnd = YStart - penLength
    			Case = 90
    				XEnd = XStart + penLength
    				YEnd = YStart
    			Case = 180
    				XEnd = XStart
    				YEnd = YStart + penLength
    			Case = 270
    				XEnd = XStart - penLength
    				YEnd = YStart
    		End Select
    		' ---
    		e.Graphics.DrawLine(pen, XStart, YStart, XEnd, YEnd)
    		' ---
    		Me.lbl_X.Text = "X = " & XStart.ToString
    		Me.lbl_Y.Text = "Y = " & YStart.ToString
    	End Sub
    End Class
    [remarks]
    1. switch ArrowAnchor and RoundAnchor
    2. calculate mouse position in PictureBox10
    3. fire Paint event in PictureBox10.DragDrop by "Refresh"
    4. describe pen's behavior in PictureBox10.Paint event

    I hope this will help you.

    Regards,

    Ashidacchi -- https://ssl01.rocketnet.jp/hokusosha.com/default.html


    • Edited by Ashidacchi Thursday, June 6, 2019 12:53 AM
    • Marked as answer by booboo_US Friday, June 7, 2019 1:36 AM
    Thursday, June 6, 2019 12:48 AM
  • Thank you Ashidacchi.  That is exactly what I wanted.  I appreciate it.

    Bob

    Friday, June 7, 2019 1:36 AM