drag to pan on an UserControl

Question

I'm trying to build my own "PictureBox like" control adding some functionalities. For example, I want to be able to pan over a big image by simply clicking and dragging with the mouse.

The problem seems to be on my OnMouseMove method. If I use the following code I get the drag speed and precision I want, but of course, when I release the mouse button and try to drag again the image is restored to its original position.

using System.Drawing;
using System.Windows.Forms;

namespace Testing
{
    public partial class ScrollablePictureBox : UserControl
    {
        private Image image;
        private bool centerImage;

        public Image Image
        {
            get { return image; }
            set { image = value; Invalidate(); }
        }

        public bool CenterImage
        {
            get { return centerImage; }
            set { centerImage = value; Invalidate(); }
        }

        public ScrollablePictureBox()
        {
            InitializeComponent();
            SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer, true);
            Image = null;
            AutoScroll = true;
            AutoScrollMinSize = new Size(0, 0);
        }

        private Point clickPosition;
        private Point scrollPosition;

        protected override void OnMouseDown(MouseEventArgs e)
        {
            base.OnMouseDown(e);
            clickPosition.X = e.X;
            clickPosition.Y = e.Y;
        }

        protected override void OnMouseMove(MouseEventArgs e)
        {
            base.OnMouseMove(e);
            if (e.Button == MouseButtons.Left)
            {
                scrollPosition.X = clickPosition.X - e.X;
                scrollPosition.Y = clickPosition.Y - e.Y;
                AutoScrollPosition = scrollPosition;
            }
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            e.Graphics.FillRectangle(new Pen(BackColor).Brush, 0, 0, e.ClipRectangle.Width, e.ClipRectangle.Height);

            if (Image == null)
                return;

            int centeredX = AutoScrollPosition.X;
            int centeredY = AutoScrollPosition.Y;

            if (CenterImage)
            {
               //Something not relevant
            }

            AutoScrollMinSize = new Size(Image.Width, Image.Height);
            e.Graphics.DrawImage(Image, new RectangleF(centeredX, centeredY, Image.Width, Image.Height));
        }
    }
}

But if I modify my OnMouseMove method to look like this:

protected override void OnMouseMove(MouseEventArgs e)
{
    base.OnMouseMove(e);
    if (e.Button == MouseButtons.Left)
    {
        scrollPosition.X += clickPosition.X - e.X;
        scrollPosition.Y += clickPosition.Y - e.Y;
        AutoScrollPosition = scrollPosition;
    }
}

... you will see that the dragging is not smooth as before, and sometimes behaves weird (like with lag or something).

What am I doing wrong?

I've also tried removing all "base" calls on a desperate movement to solve this issue, haha, but again, it didn't work.

Thanks for your time.

score 3 · Answer 1 · answered Apr 22 '10 at 12:19

Finally, I managed to find a solution:

protected Point clickPosition;
protected Point scrollPosition;
protected Point lastPosition;

protected override void OnMouseDown(MouseEventArgs e)
{
    clickPosition.X = e.X;
    clickPosition.Y = e.Y;
}

protected override void OnMouseUp(MouseEventArgs e)
{
    Cursor = Cursors.Default;
    lastPosition.X = AutoScrollPosition.X;
    lastPosition.Y = AutoScrollPosition.Y;
}

protected override void OnMouseMove(MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        Cursor = Cursors.Hand;
        scrollPosition.X = clickPosition.X - e.X - lastPosition.X;
        scrollPosition.Y = clickPosition.Y - e.Y - lastPosition.Y;
        AutoScrollPosition = scrollPosition;
    }
}

This solution works great, except that it will allow pan on the scrollbars, making them unusable.. — miguelmpn, May 08 '18 at 09:58
I would also add this as a solution.. https://stackoverflow.com/questions/26386945/detect-if-user-is-scrolling-datagridview-scrollbar#answer-26387200 — miguelmpn, May 08 '18 at 10:09

toddmo · Answer 2 · 2012-01-19T16:05:24.863

This is always confusing every time I have to do it. For the benefit of those newly arriving to this thread I came up with a slightly simpler solution that gives smooth panning.

Private GrabPoint As Point

Private Sub OnMouseDown(MouseEventArgs e)
  GrabPoint = e.Location
End Sub

Private Sub OnMouseMove(MouseEventArgs e)
  If e.Button = System.Windows.Forms.MouseButtons.Left Then
    AutoScrollPosition = GrabPoint - e.Location - AutoScrollPosition
  End If
End Sub

Private Sub OnMouseUp(MouseEventArgs e)
  GrabPoint = Point.Empty
End Sub

By the way, the grab and grabbing hand cursors can be downloaded from: http://theburningmonk.com/2010/03/wpf-loading-grab-and-grabbing-cursors-from-resource/

You can add them to your project as embedded resources and set them with:

Cursor = New Cursor(System.Reflection.Assembly.GetExecutingAssembly.GetManifestResourceStream(String.Format("{0}.{1}.cur", Me.GetType.Namespace, "grabbing")))

drag to pan on an UserControl

2 Answers2