TouchPointsDemo: How to Get All TouchPoints

<< Back to the Windows Phone page

Another way to receive information about touch events is via a low-level event that lets you get all touch points in contact with the surface.

General method for subscribing to low-level multi-touch contacts

The code segments below illustrate how you can receive updates about

all touch contacts on the screen of the mobile phone
the primary touch point -- the contact that first touched down -- if more than one contact is detected

a) Register for touch events ; e.g., by putting the following line in your constructor:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

b) Handle touch events in the callback method

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
// Get primary touch point
TouchPoint point = e.GetPrimaryTouchPoint(this.canvas);

// ... or get all current touch points on screen
TouchPointCollection tpc = e.GetTouchPoints(this.canvas);

// Iterate over all touch points in the collection
foreach (TouchPoint touchPoint in tpc)
{
// Get X and Y position of the touch point
touchPoint .Position.X;
touchPoint .Position.Y;

[...]
}
}

Example: a multi-touch drawing application

TouchPoints (zip) is a finger painting program that detects multiple touches, draws the primary touchpoint in blue, and all others in red. You can clear the display by pressing the clear button.
Note: points can be drawn outside the canvas - this is a (somewhat strange) default behaviour of canvases, which can be 'fixed' by setting various Clip properties. Google "Silverlight Canvas Clipping" to see how, if you want.

a) Build the Interface in XAML
Replace the Content Panel with the following lines, which creates a canvas and a button (for clearing the canvas)

b) Create the code behind
which just registers for touch events, handles the callback, and draws the points

public MainPage()
{
InitializeComponent();
// Register low level event handler to get all touch events
Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
}

// Process all touch events, where we draw the primary touch point in blue, and others in red
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
// Get primary touch point (i.e., the first touch down) and draw it as blue
TouchPoint primaryTouchPoint = e.GetPrimaryTouchPoint(this.canvas);
drawPoint(canvas, Colors.Blue, primaryTouchPoint.Position.X, primaryTouchPoint.Position.Y);

//Get all other touch points as a collection
TouchPointCollection tpc = e.GetTouchPoints(this.canvas);

// Iterate over all touch points in the collection,
foreach (TouchPoint touchPoint in tpc)
{
// Draw all but the primary touch point in red
if (touchPoint.Position != primaryTouchPoint.Position)
{
drawPoint(canvas, Colors.Red, touchPoint.Position.X, touchPoint.Position.Y);
}
}
}

// Draw the point
private void drawPoint(Canvas canvas, Color color, double x, double y)
{
Ellipse e = new Ellipse();
e.Width = e.Height = 10;
e.Fill = new SolidColorBrush(color);
Canvas.SetLeft(e, x);
Canvas.SetTop(e, y);
canvas.Children.Add(e);
}

// Clear the canvas
private void buttonClear_Click(object sender, RoutedEventArgs e)
{
canvas.Children.Clear();
}