Moving images inside a picturebox

Im using the code below to move and reposition images on a picturebox. First I would click the test button to add an image or two. Next click on an image, hold down the mouse button and and move it to a new position. Problem is the image is jumpy and rarely redraws exactly where I try and place it with the mouse.

There is a main picturebox, pbImages. Each time you add an image it will add to this picturebox control inside a picturebox itself. The event listeners MouseDown and MouseUp reposition the current image, pbCurrent.

    Friend WithEvents pbImages As System.Windows.Forms.PictureBox
    ... (windows forms designer generated code)
    Private bDragingImage As Boolean = False
    Private pbCurrent As PictureBox

    Private Sub btnAddImage_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddImage.Click
        'add an image to the array
        Dim x As New PictureBox
        x.BackColor = Color.Black
        x.SizeMode = PictureBoxSizeMode.AutoSize
        Dim Y As Image
        Y = Image.FromFile("group_andy.gif")
        x.Image = Y
        x.Left = 10
        x.Top = 10
        Dim sq As New Square(10, 10, Y.Width, Y.Height)
        AddHandler x.MouseDown, AddressOf Me.pbMouseDown
        AddHandler x.MouseUp, AddressOf Me.pbMouseUp
        x.Tag = sq
        Me.pbImages.Controls.Add(x)
        Me.pbCurrent = x
    End Sub

    Private Sub pbMouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        Me.sbTitle.Text = e.X.ToString & ", " & e.Y.ToString
        If Not Me.bDragingImage Then
            Me.bDragingImage = True
            Me.pbCurrent = sender
        End If
    End Sub

    Private Sub pbMouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        Me.sbMessage.Text = e.X.ToString & ", " & e.Y.ToString
        Me.pbCurrent.Top = e.X '+ Me.pbImages.Top
        Me.pbCurrent.Left = e.Y '+ Me.pbImages.Left
    End Sub
LVL 1
craigdevAsked:
Who is Participating?
 
Mike TomlinsonConnect With a Mentor Middle School Assistant TeacherCommented:
Use...

    Private Sub btnAddImage_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAddImage.Click
        Dim x As New PictureBox
        ' ...
        AddHandler x.MouseDown, AddressOf Me.pbMouseDown
        AddHandler x.MouseMove, AddressOf Me.pbMouseMove
        AddHandler x.MouseUp, AddressOf Me.pbMouseUp
        ' ...        
    End Sub

    Private startX, startY As Integer

    Private Sub pbMouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        If e.Button = Windows.Forms.MouseButtons.Left Then
            startX = e.X
            startY = e.Y
        End If
    End Sub

    Private Sub pbMouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        If e.Button = Windows.Forms.MouseButtons.Left Then
            sender.Location = New Point(sender.Left + e.X - startX, sender.Top + e.Y - startY)
        End If
    End Sub

    Private Sub pbMouseUp(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs)
        ' do something in here if you need to...
        ' but it's not necessary for the moving of the PictureBox
    End Sub
0
 
AlexFMCommented:
You need to handle also MouseMove event and change image coordinates in it, if bDragingImage is true.
All mouse event handlers should invalidate PictureBox to redraw it immediately:
pb.Invalidate
0
 
craigdevAuthor Commented:
At first I tried using MouseMove but I have simplified it just to try and get it working like this. I am unsure why it is jumping around all over the place.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.