Question

I have a picture box set to AutoSize so that the image forces it to grow to the image’s full size.

The picture box is in a panel with autoScroll = true, so that scroll bars appear when the picture is larger than the panel.

How can I programmatically scroll the panel as the user clicks the drags on the image, thereby repositioning the image.

I’ve tried used the MouseMove event, capturing the last X and Y positions of the mouse, calculating how much the mouse has moved, and adjusted the Vertical and Horizontal Scroll values of the panel.

The does move the image around, but it jumps all over the place, and scrolls unpredictably.

How can I achieve this?

Here’s what I have in my Mouse events…

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (dragging)
    {
        if (e.Button == MouseButtons.Left)
        {
            // move the image inverse to direction dragged
            int horizontalChange = (e.X - startingX) * -1;  
            int newHorizontalPos = panel1.HorizontalScroll.Value + horizontalChange;

            if (newHorizontalPos < panel1.HorizontalScroll.Minimum)
            {
                newHorizontalPos = panel1.HorizontalScroll.Minimum;
                horizontalChange = 0;
            }

            if (newHorizontalPos > panel1.HorizontalScroll.Maximum)
            {
                newHorizontalPos = panel1.HorizontalScroll.Maximum;
                horizontalChange = 0;
            }

            panel1.HorizontalScroll.Value = newHorizontalPos;

            int verticalChange = (e.Y - startingY);
            // move the image inverse to direction dragged
            int newverticalPos = panel1.VerticalScroll.Value + verticalChange * -1;  

            if (newverticalPos < panel1.VerticalScroll.Minimum)
            {
                newverticalPos = panel1.VerticalScroll.Minimum;
                verticalChange = 0;
            }

            if (newverticalPos > panel1.VerticalScroll.Maximum)
            {
                newverticalPos = panel1.VerticalScroll.Maximum;
                verticalChange = 0;
            }

            panel1.VerticalScroll.Value = newverticalPos;
        }
    }

    startingX = e.X;
    startingY = e.Y;
}

Is my logic wrong or is my understanding of the panel’s scrolling functionality wrong?

Answer 1

I believe your instinct is correct but your mistake is to attempt to adjust the scrollbars rather than moving the PictureBox within the scrollable panel.

You should intercept the MouseMove and adjust the PictureBox’s Location property by the mouse movement delta — the scrollbars should automatically update to reflect the image’s new location within it.

Updating your code would look something like tho following (untested):

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (dragging)
    {
        if (e.Button == MouseButtons.Left)
        {
            int horizontalChange = (e.X - startingX) * -1;  // move the image inverse to direction dragged

            int verticalChange = (e.Y - startingY);

            pictureBox1.Left += horizontalChange;
            pictureBox1.Top += verticalChange;
        }
    }

    startingX = e.X;
    startingY = e.Y;
}

(Also, I would be inclined to record the starting mouse and PictureBox locations at the start of the drag and update them relative to this starting position on each MouseMove event rather than make incremental changes as the code above (and your original code does). The reason for this is that if there are any unexpected values, for whatever reason, then this will only cause a transitory effect — the next good event will self-correct.)