Multitouch Part 4: Multitouch in Silverlight

Yesterday, we discussed multitouch in WPF.  Today, let’s investigate how this compares to multitouch in Silverlight. 

The Silverlight touch model is different from the WPF touch model. 

Silverlight 4 supports some of the multitouch API from WPF.  However, the Silverlight 4 client as a whole is registered for touch messages, and the multitouch events are handled through a client-level Touch service class.  In contrast, WPF has element-level support for multitouch events on its UIElement class. 

Also, the Silverlight 4 version of multitouch does not provide native gesture handling or manipulation/inertia handling.  If you need this support in Silverlight 4, you have to handle the raw messages and implement this functionality yourself (or do a web search since several people have already published “Silverlight Gesture Engines”…here’s one). 

Let’s look at some Silverlight multitouch code!  I wrote a small Silverlight 4 application that will display “Ouch” wherever your finger touches the screen.

First, we need to listen for the touch events by wiring up an event handler on the FrameReported event.  I’m doing this in the constructor of the MainPage. 

 public MainPage()
{
    InitializeComponent();

    // Register for touch events
    Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
}

Then, we need to handle the touch events in the event handler.  First, we get the collection of touch points from the event argument e, and then we process the touch points.  For each touch, I create a new TextBlock which displays “Ouch”, set its position (X and Y values) to be where the touch occurred, and add the TextBlock to the LayoutRoot canvas.  

 void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
    TouchPointCollection t = e.GetTouchPoints(this);

    // Process the touch points
    for (int i = 0; i < t.Count; i++)
    {
        TextBlock tb = new TextBlock();
        tb.Text = "Ouch";
        tb.SetValue(Canvas.LeftProperty, t[i].Position.X);
        tb.SetValue(Canvas.TopProperty, t[i].Position.Y);
        tb.Visibility = Visibility.Visible;
        LayoutRoot.Children.Add(tb);
    }
}

Note that for this to work properly, in your XAML, you must use a Canvas rather than a Grid, which the Visual Studio template gives you by default. 

     <Canvas x:Name="LayoutRoot" Background="White">
    </Canvas>

Tomorrow, we will conclude this blog post series with some thoughts on user experience. 

Other blog posts in this series:

Multitouch Part 1: Getting Started with Multitouch in Windows 7

Multitouch Part 2: Support for Gestures in Windows 7

Multitouch Part 3: Multitouch in managed code and WPF

Multitouch Part 4: Multitouch in Silverlight

Multitouch Part 5: User Experience with Multitouch

Comments

• Anonymous
  October 12, 2012
  The comment has been removed