How can I cause a panel to scroll programatically to expose its AutoSized picture box

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?

Kidron

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.)

Semantic

Thanks. I'm working with this approach. The panel control doesn't show scroll bars if you move the picture box off the top or left sides though :-( – Kidron

Oh, that's odd — it really should if you have AutoScroll turned on. – Semantic

Answer 2

It is jumping because the act of scrolling the panel will throw off the mouse position by the scroll amount. You can get the "real" mouse position (relative from the upper left corner of the panel) like this:

  Point realPos = new Point(e.X + panel1.AutoScrollPosition.X,
    e.Y + panel1.AutoScrollPosition.Y);

assuming the picture box' Location property is (0, 0). The best way to scroll the panel is to set its AutoScrollPosition property.

Fray

Answer 3

You can set the panel's AutoScrollPosition in MouseMove event. Tested and works fine.

panel1.AutoScrollPosition = new Point(-panel1.AutoScrollPosition.X - e.X + startPoint.X, -panel1.AutoScrollPosition.Y - e.Y + startPoint.Y);

Competency