Multitouch in Windows Phone 7
Join the DZone community and get the full member experience.
Join For FreeI 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.
Published at DZone with permission of Andrew Conlisk, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments