winform move an image inside a picturebox

Question

I've been trying to do this for a few hours now, but for the life of me I can't make it possible.

What I'm trying to do is simply move the image found within a picture box in a winform application. My image is roughly 1000x1000 pixels and my box is something arbitrary like 400x500, so, for example, when I click the mouse I'd want the image to move 50 to the left. But the image box should remain the same size.

For the life of me, however, I can't get this to work. What I have been able to do is the following:

     if (kinectController.hands[0].fingertips.Count == 1)
        {
            pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;

        }

This function is for my kinect finger tracking app. So when the application finds a single finder point visiable on the screen, the image is centered. However, I would eventually like the image to move along with my finger movement, which will come once I work out the basic step of moving the image a few pixels to the side.

Any help with this would be appreciated.

Answer 1

I did a little bit of research and apparently moving an image within a PictureBox is no easy task, at the very least I couldn't find anything that would make this possible (not saying there isn't a way to do it though).

However, I came up with a bit of a "workaround", see if this fits your needs. To accomplish this:

• Create a Panel control, and size it to however much of the image you would like to display
• Inside that panel place a PictureBox control with your image in it and set the SizeMode property to AutoSize.

Now, put this code in your form

private bool Dragging;
private int xPos;
private int yPos;
private void pictureBox1_MouseUp(object sender, MouseEventArgs e) { Dragging = false; }
private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
    if (e.Button == MouseButtons.Left) { 
        Dragging = true;
        xPos = e.X;
        yPos = e.Y;
    }
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
    Control c = sender as Control;
    if (Dragging && c!= null) {
        c.Top = e.Y + c.Top - yPos;
        c.Left = e.X + c.Left - xPos;
    }
}

Now whenever you click and drag on the PictureBox, it won't actually move the image within it, but the PictureBox control within the panel. Again, not exactly what you were looking for and I'm not sure how this would convert over to Kinect, but I hope this gets you on the right track.

Answer 2

Not enough reputation to comment but I wanted to add on Ben Black answer if someone ever need more control over the image moving around so you can't move the image past it's borders :

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        Control c = sender as Control;
        if (Dragging && c != null)
        {
            int maxX = pictureBox1.Size.Width * -1 + panel.Size.Width;
            int maxY = pictureBox1.Size.Height * -1 + panel.Size.Height;

            int newposLeft = e.X + c.Left - xPos;
            int newposTop = e.Y + c.Top - yPos;

            if (newposTop > 0)
            {
                newposTop = 0;
            }
            if (newposLeft > 0)
            {
                newposLeft = 0;
            }
            if (newposLeft < maxX)
            {
                newposLeft = maxX;
            }
            if (newposTop < maxY)
            {
                newposTop = maxY;
            }
            c.Top = newposTop;
            c.Left = newposLeft;

        }
    }