A Simple Panning PictureBox (Winforms)

Question

I want to implement a panning pictureBox in C# winforms. I have a panel on which the autoScroll property is set to true. Within the panel I have my pictureBox whose sizeMode is set to autoSize. On the pictureBox I am listening to mouse events like so:

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        dragging = true;
        start = new Point(e.Location.X + pictureBox1.Location.X, e.Location.Y + pictureBox1.Location.Y);
    }
}

private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (dragging)
    {
        Debug.WriteLine("mousemove X: " + e.X + " Y: " + e.Y);

        pictureBox1.Location = new Point(start.X - e.Location.X, start.Y - e.Location.Y);
        this.Refresh();
    }
}

private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    Debug.WriteLine("mouseup");

    dragging = false;
}

The problem is that after I release the button something still keeps firing mouseMove events and the image is very slowly being panned by much more then it should be. If I drag the image by a few pixels (maybe 2 or 3) then after releasing the button the image is being panned for a few a seconds and the output is:

mousemove X: 66 Y: 37 mousemove X: 66 Y: 38 mousemove X: 66 Y: 39 mousemove X: 66 Y: 40 mousemove X: 66 Y: 41 mousemove X: 66 Y: 42 mousemove X: 66 Y: 43 mousemove X: 66 Y: 44 mousemove X: 66 Y: 45 mousemove X: 66 Y: 46

a.s.o....

First: Debug.WriteLine is time consuming; second: I think you should change this.Refresh(); with picturebox1.Refresh();; third: don't refresh everytime on MouseMove, but do it only when mouse position is changed withing a minimum range... — Marco
Thanks very much for your answer. Your suggestions do seem to improve things, but if it is struggling with a static picture then how is it going to cope with all the stuff that I want to draw dynamically? — Tamas Pataky

Hans Passant Hans Passant · Accepted Answer · 2012-01-24T11:19:25

Hard to guess. Your mouse coordinate handling is however wrong, it will send the PB quickly into far away corner. And don't call the form's Refresh() method, there's no point in repainting it. Fix:

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e) {
        if (e.Button == MouseButtons.Left) {
            dragging = true;
            start = e.Location;
        }
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e) {
        if (dragging) {
            Debug.WriteLine("mousemove X: " + e.X + " Y: " + e.Y);

            pictureBox1.Location = new Point(pictureBox1.Left + e.Location.X - start.X,
                pictureBox1.Top + e.Location.Y - start.Y);
        }
    }

A Simple Panning PictureBox (Winforms)

1 Answers