Multitouch in WP7

Posted by Andrew on April 12, 2012 Leave a comment (0) Go to comments

I just published an app. (You can check it out here http://underbridgecity.net/underbridgegraffiti/.) Has the ability to allow more then 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

1	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>();

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;
 }
 }
 }

}

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
 }