#732 – Basic Events for Raw Touch Input

WPF includes a set of events for handling raw touch input.  These events are defined for all UIElement, ContentElement, and UIElement3D objects.

The most basic events are:

  • TouchDown – User touches the screen
  • TouchMove – User moves finger across the screen
  • TouchUp – User lifts finger off the screen

Below is a simple example that allows drawing using touch.  We’ve defined event handlers and attached them to a main Canvas element.  A red circle is drawn at the TouchDown point and a blue circle at the TouchUp point.  A continuous line is drawn as the user moves their finger across the screen.

        private const double CircleWidth = 10;
        private Point LastPosition;

        private void Canvas_TouchDown(object sender, TouchEventArgs e)
        {
            try
            {
                TouchPoint tp = e.GetTouchPoint(null);

                AddEllipseAt(canvMain, tp.Position, Brushes.Red);
                LastPosition = tp.Position;
            }
            catch (Exception xx)
            {
                MessageBox.Show(xx.ToString());
            }
        }

        private void Canvas_TouchMove(object sender, TouchEventArgs e)
        {
            TouchPoint tp = e.GetTouchPoint(null);

            AddLineFromTo(canvMain, LastPosition, tp.Position, Brushes.Black);
            LastPosition = tp.Position;
        }

        private void Canvas_TouchUp(object sender, TouchEventArgs e)
        {
            TouchPoint tp = e.GetTouchPoint(null);

            AddEllipseAt(canvMain, tp.Position, Brushes.Blue);
        }

        private void AddEllipseAt(Canvas canv, Point pt, Brush brush)
        {
            Ellipse el = new Ellipse();
            el.Stroke = brush;
            el.Fill = brush;
            el.Width = CircleWidth;
            el.Height = CircleWidth;

            Canvas.SetLeft(el, pt.X - (CircleWidth / 2));
            Canvas.SetTop(el, pt.Y - (CircleWidth / 2));

            canv.Children.Add(el);
        }

        private void AddLineFromTo(Canvas canv, Point from, Point to, Brush brush)
        {
            Line l = new Line();
            l.Stroke = brush;
            l.X1 = from.X;
            l.Y1 = from.Y;
            l.X2 = to.X;
            l.Y2 = to.Y;
            l.StrokeThickness = 2;

            canv.Children.Add(l);
        }

So when I touch and drag on a touch-enabled device, I get something that looks like this:

732-BasicTouch

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #732 – Basic Events for Raw Touch Input

  1. Pingback: #749 – Handling the TouchEnter and TouchLeave Events « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: