Over a million developers have joined DZone.

Detecting and handling multi-touch events in Windows Phone 7 applications

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

In this tutorial I am going to describe a very simple application I’ve developed while playing around with multi-touch functionality in Windows Phone 7. Application is going to detect and handle multi-touch event for 4 touch points simultaneously. Image bellow shows application is action.

eugenedotnet multi-touch for windows phone 7 tutorial

My goal was to create an application, which detects a multi-touch event using multiple touch points. Each touch point should be rendered as en ellipse filled with a specific gradient color (first finger – green, second finger – red, third finger – yellow, fourth finger – blue).

Creating XAML

I have created a very basic XAML page, replaced content grid with canvas (it will allow to set a XY-position for UI elements).

<Grid x:Name="LayoutRoot" Background="Transparent">
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="EUGENEDOTNET SAMPLES" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="multi-touch" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    <Canvas x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="White" />

Detecting and handling multi-touch event

Subscribing to multi-touch event in Windows Phone 7 is very easy. All you have to do is to add a handler to FrameReported event (check code bellow) in the constructor of XAML page. I’ve noticed if you pan the surface then event will be triggered every 15-25 milliseconds.

public MultiTouchTestPage()
    Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
Within a handler we need to get all touch points and draw ellipse filled with specific color for each of them.
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
    TouchPointCollection tpc = e.GetTouchPoints(ContentPanel);
    int numberOfTouchPoint = 1;
    tpc.ToList().ForEach(x => DrawEllipse(x.Position, numberOfTouchPoint++));
private void DrawEllipse(Point p, int numberOfTouchPoint)
    Ellipse el = new Ellipse()
        Fill = GetColorBrush(numberOfTouchPoint),
        Height = 100,
        Width = 100
    el.Tag = DateTime.Now;
    Canvas.SetLeft(el, p.X - 36);
    Canvas.SetTop(el, p.Y - 36);
private GradientBrush GetColorBrush(int numberOfTouchPoint)
    Color secCol = Colors.Transparent;
    if (numberOfTouchPoint == 1)
        return new RadialGradientBrush(Colors.Green, secCol);
    else if (numberOfTouchPoint == 2)
        return new RadialGradientBrush(Colors.Red, secCol);
    else if (numberOfTouchPoint == 3)
        return new RadialGradientBrush(Colors.Yellow, secCol);
    else if (numberOfTouchPoint == 4)
        return new RadialGradientBrush(Colors.Blue, secCol);
        return new RadialGradientBrush(Colors.Blue, secCol);

Removing ellipses

If our current page is no longer the active page in frame then we can remove all the ellipses from screen. In that case we simply need to override OnNavigatedFrom method and clear the children of canvas
protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)

Source:  http://www.eugenedotnet.com/2011/01/w16-handling-multi-touch-events-in-windows-phone-7-applications/

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}