how to get smartphone like scrolling for a winforms touchscreen app ( scrolling panel )

Viewed 14102

After scouring the articles online I have come up with this design for a winforms based touchscreen app that needs smartphone like scrolling. The app itself will run on a tablet laptop or touchscreen desktop.

  • I put everything I want to scroll on a panel.
  • Set autoscroll to true (which will show scrollbars)
  • Now put this whole panel inside a groupbox
  • Shrink the groupbox until the scrollbars are hidden (visually hidden, not visible = false)

Now the fun part I am stuck at. I think I have to handle the mousedown, mouseup & mousemove on the panel to set the autoscrollposition so that when someone touches the panel and drags, it does it's scroll magic. Please help fill in the few lines of code in below method stubs. The msdn doc on autoscrollposition is very confusing since it returns negative numbers but needs to be set to positive with abs and what not.

Point mouseDownPoint;
Point mouseUpPoint;
Point mouseDragPoint;
 private void myPanel_MouseDown(object sender, MouseEventArgs e)
 {
    this.mouseDownPoint = e.Location;
    Console.WriteLine("Mouse down at {0}", e.location);
 }

 private void myPanel_MouseUp(object sender, MouseEventArgs e)
 {
    this.mouseUpPoint = e.Location;
    this.mouseDownPoint = new Point(); //will set for IsEmpty check
    Console.WriteLine("Mouse Up at {0}", e.location);
 }

 private void myPanel_MouseMove(object sender, MouseEventArgs e)
 {
    Console.WriteLine("Mouse at {0}", e.location);
    if (mouseDownPoint.IsEmpty()) //finger is off the touchscreen
       return;
    myPanel.Autocrollposition = ??
 }

thank you

//UPDATE - Below I have with trial and error working & tested code. (not refactored). If someone has a more elegant solution please post.

    Point mouseDownPoint;
    private void innerpanel_MouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button == MouseButtons.Left)
            this.mouseDownPoint = e.Location;
    }

    private void innerpanel_MouseMove(object sender, MouseEventArgs e)
    {
        if (e.Button != MouseButtons.Left)
            return;
        if ((mouseDownPoint.X == e.Location.X) && (mouseDownPoint.Y == e.Location.Y))
            return;

        Point currAutoS = innerpanel.AutoScrollPosition;
        if (mouseDownPoint.Y > e.Location.Y)
        {
            //finger slide UP
            if (currAutoS.Y != 0)
                currAutoS.Y = Math.Abs(currAutoS.Y) - 5;
        }
        else if (mouseDownPoint.Y < e.Location.Y)
        {
            //finger slide down
            currAutoS.Y = Math.Abs(currAutoS.Y) + 5;
        }
        else
        {
            currAutoS.Y = Math.Abs(currAutoS.Y);
        }

        if (mouseDownPoint.X > e.Location.X)
        {
            //finger slide left
            if (currAutoS.X != 0)
                currAutoS.X = Math.Abs(currAutoS.X) - 5;
        }
        else if (mouseDownPoint.X < e.Location.X)
        {
            //finger slide right
            currAutoS.X = Math.Abs(currAutoS.X) + 5;
        }
        else
        {
            currAutoS.X = Math.Abs(currAutoS.X);
        }
        innerpanel.AutoScrollPosition = currAutoS;
        mouseDownPoint = e.Location; //IMPORTANT

    }
6 Answers

7 Years later but for anyone that is looking for a neat and tidy winforms solution:

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

    /// <summary>
    /// Pass the panel into constructor and the control will be turned into a touch scrollable control.
    /// </summary>
    public class TouchScroll
    {
        private Point mouseDownPoint;
        private Panel parentPanel;

        /// <summary>
        /// pass in the panel you would like to be touch scrollable and it will be handled here.
        /// </summary>
        /// <param name="panel">The root panel you need to scroll with</param>
        public TouchScroll(Panel panel)
        {
            parentPanel = panel;
            AssignEvents(panel);
        }

        private void AssignEvents(Control control)
        {
            control.MouseDown += MouseDown;
            control.MouseMove += MouseMove;
            foreach (Control child in control.Controls)
                AssignEvents(child);
        }

        private void MouseDown(object sender, MouseEventArgs e)
        {
            if (e.Button == MouseButtons.Left)
                this.mouseDownPoint = Cursor.Position;
        }

        private void MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button != MouseButtons.Left)
                return;

            Point pointDifference = new Point(Cursor.Position.X - mouseDownPoint.X, Cursor.Position.Y - mouseDownPoint.Y);

            if ((mouseDownPoint.X == Cursor.Position.X) && (mouseDownPoint.Y == Cursor.Position.Y))
                return;

            Point currAutoS = parentPanel.AutoScrollPosition;
            parentPanel.AutoScrollPosition = new Point(Math.Abs(currAutoS.X) - pointDifference.X, Math.Abs(currAutoS.Y) - pointDifference.Y);
            mouseDownPoint = Cursor.Position; //IMPORTANT
        }
    }
}
Related