#734 – Recognizing Different Fingers in Touch Event Handlers

When you’re handling low-level touch events in WPF and the user will be using more than one finger at a time on the screen, you’ll want to keep track of which finger is generating a particular touch event.  You can do this using the TouchEventArgs.TouchDevice.Id property.  Every touch event handler will report a different Id for each finger that is touching the screen.  Also, when you touch and drag a finger on the screen, the Id property will remain the same for all events associated with that finger.

Here’s an example.

        private const double CircleWidth = 10;
        private Dictionary<int, Point> LastPositionDict;

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

                AddEllipseAt(canvMain, tp.Position, Brushes.Red);

                LastPositionDict.Add(e.TouchDevice.Id, tp.Position);
            }
            catch (Exception xx)
            {
                MessageBox.Show(xx.ToString());
            }
        }

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

            AddLineFromTo(canvMain, LastPositionDict[e.TouchDevice.Id], tp.Position, Brushes.Black);
            LastPositionDict[e.TouchDevice.Id] = tp.Position;
        }

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

            AddEllipseAt(canvMain, tp.Position, Brushes.Blue);
            LastPositionDict.Remove(e.TouchDevice.Id);
        }

Now I can draw with two fingers at the same time: