Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Mobile Zone ·
Free Resource

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">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <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}"/>
    </StackPanel>
    <Canvas x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="White" />
</Grid>

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()
{
    InitializeComponent();
    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);
    ContentPanel.Children.Add(el);
}
 
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);
    else
        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)
{
    this.ContentPanel.Children.Clear();
    base.OnNavigatedFrom(e);
}

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}