Multi Touch enabling your WPF application

Recently I had the possibility to work on some multi-touch stuffs using the .NET wrappers for the touch APIs included in Windows 7 RC.

Do you remember Simon? As described by Wikipedia:

Simon is an electronic game of rhythm and memory skill invented by Ralph H. Baer and Howard J. Morrison,[1] with the software programming being done by Lenny Cope and manufactured and distributed by Milton Bradley. Simon was launched in 1978 at Studio 54 in New York City and became an immediate success. It became a pop culture symbol of the 1980s.”

And… here we go, let’s connect to http://simon.codeplex.com and play with the Silverlight on-line version built by David J Kelley:

Simon

How to add basic multi touch gestures (rotation, scale and transform) to the WPF version? It’s quite impressive to look at the amount of code required using the Windows 7 Multitouch .NET Interop Sample Library: just insert some transforms in the User Control XAML

<Viewbox x:Name="_simon" RenderTransformOrigin="0.5, 0.5">
<uc:Simon/>
<Viewbox.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="_rotate" Angle="0"/>
<ScaleTransform x:Name="_scale" ScaleX="1" ScaleY="1"/>
<TranslateTransform x:Name="_translate" X="0" Y="0"/>
</TransformGroup>
</Viewbox.RenderTransform>
</Viewbox>

And then use this code to control the TransformGroup using the Multi touch engine:

using System;
using System.Windows;
using Windows7.Multitouch.Manipulation;
using Windows7.Multitouch.WPF;

namespace SimonWPF
{
public partial class MultiTouchWindow1 : Window
{
ManipulationProcessor _processor = new ManipulationProcessor(ProcessorManipulations.ALL);

public MultiTouchWindow1()
{
InitializeComponent();

Loaded += (s, e) => { Factory.EnableStylusEvents(this); };

StylusDown += (s, e) => { _processor.ProcessDown((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

StylusUp += (s, e) => { _processor.ProcessUp((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

StylusMove += (s, e) => { _processor.ProcessMove((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

_processor.ManipulationDelta += ProcessManipulationDelta;
_processor.PivotRadius = 2;
}

private void ProcessManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
_translate.X += e.TranslationDelta.Width;
_translate.Y += e.TranslationDelta.Height;

_rotate.Angle += e.RotationDelta * 180 / Math.PI;

_scale.ScaleX *= e.ScaleDelta;
_scale.ScaleY *= e.ScaleDelta;
}
}
}

It’s also possible to verify if your hardware supports multi touch:

if (Windows7.Multitouch.TouchHandler.
DigitizerCapabilities.IsMultiTouchReady)
{
//MultiTouch is available
this.StartupUri = new Uri("MultiTouchWindow1.xaml", UriKind.Relative);
}
else this.StartupUri = new Uri("Window1.xaml", UriKind.Relative);

The complete code is available on CodePlex: http://simon.codeplex.com.

Enjoy Windows 7 Multi touch! And now… waiting for Silverlight 3 :)

The multi touch library is governed by this license.


4 Responses to “Multi Touch enabling your WPF application”

Leave a Reply