Silverlight 3.0 and MultiTouch

If you own a MultiTouch computer and have Windows 7 Installed, you are in for a treat.  Silverlight 3.0 supports MultiTouch.  With just a few lines of code, you too can get started with MultiTouch.

Start out by creating adding a few rectangles to a canvas on your Silverlight page.

<Canvas x:Name="LayoutRoot" Background="Azure" >
    <Rectangle Width="50" Height="50" x:Name="TouchPoint1" Fill="Red" Visibility="Collapsed" />
    <Rectangle Width="50" Height="50" x:Name="TouchPoint2" Fill="Green" Visibility="Collapsed" />
    <Rectangle Width="50" Height="50" x:Name="TouchPoint3" Fill="Blue" Visibility="Collapsed" />
    <Rectangle Width="50" Height="50" x:Name="TouchPoint4" Fill="Yellow" Visibility="Collapsed" />       
</Canvas>

Next you will need to handle a touch event, you can bind to this with the following code, I did this somewhere in the C# CodeBehind:

Touch.FrameReported += Touch_FrameReported;

Next for the Event Handler:

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    foreach (var point in e.GetTouchPoints(null))
    {
        Rectangle rect = null;
        switch (point.TouchDevice.Id)
        {
            case 10: rect = TouchPoint1; break;
            case 12: rect = TouchPoint2; break;
            case 13: rect = TouchPoint3; break;
            case 14: rect = TouchPoint4; break;
            default: continue; break;
        }

        switch (point.Action)
        {
            case TouchAction.Down:
                rect.SetValue(Canvas.TopProperty, point.Position.Y - 25.0);
                rect.SetValue(Canvas.LeftProperty, point.Position.X - 25.0);
                rect.Visibility = Visibility.Visible;
                break;
            case TouchAction.Move:
                rect.SetValue(Canvas.TopProperty, point.Position.Y - 25.0);
                rect.SetValue(Canvas.LeftProperty, point.Position.X - 25.0);
                break;
            case TouchAction.Up:
                rect.Visibility = Visibility.Collapsed;
                break;
        }
    }
}

At this point you should be all set, just go ahead and run your Silverlight page and try out your new MultiTouch application.

At this point you probably noticed something fundamentally wrong with my code.  Using TouchPoint1, TouchPoint2, TouchPoint3 andTouchPoint4 probably isn’t the best way of doing things.  Anytime I see a variable name with a number after it I guess it raises a red flag, but this is just a sample.  My big question is what is TouchDevice.Id for the touch point?  For my HP Touch Smart tablet I have four concurrent touch points.  The values I get are 10, 12, 13 and 14.  It’s important to keep track each touch point independently.  You get a list of active touch points from the event, obviously you can’t count on sequence because the user may not initiate and end the touch points in the same sequence.

Once I find out a bit more on the TouchDevice.Id I’ll update my post.

-ec