Multitouch in Windows Phone 7

I just published an app. (You can check it out here http://underbridgecity.net/underbridgegraffiti/.) It has the ability to allow more than one finger to interact with the screen at one time. Here is how I was able to set it up on a canvas which is set up in the xaml.

So to get multitouch set up I used a TouchFrameEventhandler. You will have to add

System.Windows.Input.Touch

as a reference and a using statment.

I created a class called DrawingPoints and then created a list collection of them.

class DrawingPoints
{
    public int id { get; set; }
    public Point currentPoint { get; set; }
    public Point oldPoint { get; set; }
    public bool drawing { get; set; }
    public SolidColorBrush currentColor { get; set; }
    public double drawSize { get; set; }
}
 
List<DrawingPoints> drawingPoints = new List<DrawingPoints>();

Now you will need to create the touchevent that will happen when something touches the screen.

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    //This holds a collection of touches on the screen. So for each finger that touches the canvas one touch get added.
    TouchPointCollection tCollection = e.GetTouchPoints(DrawingCanvas);
 
    if (tCollection != null)
    {
        //iterate through the collection of touches
        foreach (var point in tCollection)
        {
            //sets up a drawing point
            DrawingPoints drawPoint;
 
            //if the touch action is the finger leaving the screen, remove the drawing point from the list of drawpoints
            if (point.Action == TouchAction.Up)
            {
                var oldPoint = drawingPoints.Single(x => x.id == point.TouchDevice.Id);
 
                if (oldPoint != null)
                {
                    drawingPoints.Remove(oldPoint);
                }
            }
 
            //if the touch action is down, add the point to the drawingpoint
            if (point.Action == TouchAction.Down)
            {
                //gets a list of colors to set which color is set as a drawing point
                var colors = App.GetDrawingColors();
 
                var color = colors.Single(c => c.ColorID == settings.DrawColor);
                var size = settings.DrawSize;
 
                //create a drawpoint and assing it Touchevent details
                drawPoint = new DrawingPoints();
 
                drawPoint.id = point.TouchDevice.Id; //sets the drawpoint an ID so it knows which finger is touching the screen
                drawPoint.currentPoint = point.Position; //gets the position
                drawPoint.oldPoint = drawPoint.currentPoint;
 
                drawPoint.currentColor = color.ColorBrush;
                drawPoint.drawSize = size;
 
                drawingPoints.Add(drawPoint);
            }
 
            //if the touch action is move, move the point and draw a path from the old point to the new point
            if (point.Action == TouchAction.Move)
            {
                drawPoint = drawingPoints.Single(x => x.id == point.TouchDevice.Id);
 
                drawPoint.currentPoint = point.Position;
 
                draw(drawPoint); //calls the draw action method
 
                drawPoint.oldPoint = drawPoint.currentPoint;
            }
        }
    }
 
}

What that does is everytime a finger touches the screen in the canvas element (which takes up the whole screen on a page in my app), a touchpoint gets added to a touch collection.

Then for each touch in the touch collection, the code checks what the action of the touch is, it will either be Up – finger leaves the screen, Down – finger touches the screen or Move – finger is moving on the screen.

• When the action is Up it removes the draw point and stops drawing.
  
• When Down is adds a drawpoint to the drawpoint collection and gets ready for the move action.
  
• When it is moving it draws a line from the point the finger was at, to the point the finger is at now.

Now you have to add the event when you go to the page you want multi touch on, and when you leave the page remove the event. To do this I override the navigation events. Now I remove the event when leaving the page becasue the touch events can cause some weird things to happen on other pages in the application.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
 
    Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported); //Adds the event to the page
}
 
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    base.OnNavigatedFrom(e);
 
    Touch.FrameReported -= new TouchFrameEventHandler(Touch_FrameReported); //removes the event from the page
}

So that is how I got multitouch set up in my application. Any questions email me or leave a comment.