Move a PictureBox with mouse

Question

I'm developing an app for windows mobile (Compact Framework 2.0). It has a WinForms with a PictureBox.

I want to move the image of the PictureBox but I don't know how to do it so I choose to move the hole PictureBox.

To do it I use this event:

private void imagenMapa_MouseMove(object sender, MouseEventArgs e)
{
      imagenMapa.Left = e.X;
      imagenMapa.Top = e.Y;
      this.Refresh();
}

But when I move the PictureBox it blinks and moves every where.

What I'm doing wrong?

Answer 1

Actual Code (Requires .NET Framework 3.5 and beyond, not sure if this is available in the Compact Framework)...

// Global Variables
private int _xPos;
private int _yPos;
private bool _dragging;

// Register mouse events
pictureBox.MouseUp += (sender, args) =>
{
    var c = sender as PictureBox;
    if (null == c) return;
    _dragging = false;
};

pictureBox.MouseDown += (sender, args) =>
{
    if (args.Button != MouseButtons.Left) return;
    _dragging = true;
    _xPos = args.X;
    _yPos = args.Y;
};

pictureBox.MouseMove += (sender, args) =>
{
    var c = sender as PictureBox;
    if (!_dragging || null == c) return;
    c.Top = args.Y + c.Top - _yPos;
    c.Left = args.X + c.Left - _xPos;
};

Answer 2

Embrace math!

control.Left = control.Left - (_lastMousePos.X - currentMousePos.X);
control.Top = control.Top - (_lastMousePos.Y - currentMousePos.Y);

Quick explanation: You get the difference from the mouse positions and apply it to the object you want to move.

Example: If the old mouse X position is 382, and the new one is 385, then the difference is -3. If the controls current X position is 10 then 10 - (-3) = 13

Why: It works for anything, and is much cheaper than constantly converting coordinates back and forth.

Answer 3

e.X & e.Y is in the coordinate space of the pictureBox, imagenMapa.Left & imagenMapa.Top is in the coordinate space of the Form. :-)

Answer 4

Actually what you have done is correct. But you gave the MouseMove property to the picturebox. You should give that property to the Form(background).

ex:

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
  imagenMapa.Left = e.X;
  imagenMapa.Top = e.Y;
}

Answer 5

Also don't forget to set your form to double buffered, that might help with the flickering, but for the actual positioning of it, I like Daniel L's suggestion

Answer 6

The e.X and e.Y are relative to the picture box (e.g. if the mouse is in the upper left of the picture box, that's 0,0) .

The values for imagenMapa.Left and imagenMapa.Top are relative to the form (or whatever control contains imagenMapa)

If you try to mix values from these two systems without conversion, you're going to get jumps (like you're seeing).

You're probably better off converting the mouse position to the same coordinate system used by the thing that contains the picture box.

You could use imagenMapa.PointToScreen to get the mouse coordinates in screen coordinates (or Cursor.Position to get the position directly), and yourForm.PointToClient to get them back in the form coordinates.

Note that depending on your needs, you could accomplish "moving an image within a control" by overriding/handling the Paint event of a control and drawing the image yourself. If you did this, you could keep everything in the picturebox coordinates, since those are likely what you would use when you called graphicsObject.DrawImage.