Introduction to Multitouch Programming in WPF 4.0

Please note: This article is outdated and needs to be updated!

Windows 7 and .NET 4.0 only

In version 4.0 of the .NET framework, Microsoft supports multitouch programming. The .NET API builds on the native Win32 API that is only available in Windows 7 and later versions. You can simulate multitouch on Windows Vista by using a special user input management layer that emulates multitouch on a normal PC.

What is availabel in Beta 1

The manipulation events are already available in Beta 1, but the WPF controls do not take use of them. In later versions you can just enable manipulation of sliders or scrollviewers on control level

How to handle multitouch input

Multitouch gestures like scaling, panning or rotating are already preprocessed by the underlying layer. You will receive the result in form of an Manipulation struct that contains a Expansion, Rotation, Scale and Translation. The information is provided in four maniuplation events:

• ManipulationStarted
• ManipulationDelta
• ManipulationStarting
• ManipulationCompleted

To enable receiving manipulation events you have to set the ManipulationMode to the manipulations you want to enable. If you want to receive all kind of manipulations, you can set the ManipulationMode="All".

How to create a simple WPF multitouch foto viewer

Create a new WPF 4.0 solution.

 
public class TouchImage : Image
{
    private MatrixTransform _matrixTransform;
 
    public TouchImage()
    {
        ManipulationMode = ManipulationModes.All;
        _matrixTransform = new MatrixTransform();
        RenderTransform = _matrixTransform;
    }
 
    protected override void OnManipulationDelta(ManipulationDeltaEventArgs e)
    {
        var manipulation = e.GetCumulativeManipulation((IInputElement)Parent);
 
        var delta = e.GetDeltaManipulation((IInputElement)Parent);
        Matrix matrix = _matrixTransform.Matrix;
 
        var originalCentre = new Point(ActualWidth / 2, ActualHeight / 2);
        matrix.Translate(delta.Translation.X, delta.Translation.Y);
        matrix.Transform(originalCentre);
 
        var centre = matrix.Transform(originalCentre);
        matrix.RotateAt(delta.Rotation, centre.X, centre.Y);
 
        centre = matrix.Transform(originalCentre);
        matrix.ScaleAt(delta.Scale, delta.Scale, centre.X, centre.Y);
 
        _matrixTransform.Matrix = matrix;
        e.Handled = true;
 
        base.OnManipulationDelta(e);
    }
}
 
 

 Comments on this article

Diego	Commented on 24.November 2009 Typo: availabel -> What is availabel in Beta 1
saman	Commented on 29.December 2009 WoW,oh my god
-	Commented on 30.January 2010 Look at the Title in the Menu: Mutlitouch
Bala	Commented on 12.February 2010 You mentioned "emulates multitouch on a normal PC" .Will it work for normal monitor(any pc monitors)?
Josep	Commented on 17.February 2010 Bala, of course that will not work on any normal monitor. One thing are PCs and another thing are monitors. You need to capture the points that you touch. Sorry, my english is not very good.
Bala	Commented on 3.March 2010 Ok...Thanks. Josep :)
heman	Commented on 11.March 2010 no props
Mohammed	Commented on 18.March 2010 hi .. thanks for the tutorial but i have small problem. my problem is e.GetCumulativeManipulation is not exist in my visual studio 2010 what i can do.. i use winxp sp3.. bye.
Rob	Commented on 21.May 2010 Just a friendly tip regarding your website's banner: http://theoatmeal.com/comics/apostrophe
FBI	Commented on 23.August 2010 COPYRIGHT INFRINGEMENT AT ITS FINEST!!!!!!!!! MOSER IS GREASY AS HELL
FBI	Commented on 23.August 2010 YOU LOOK LIKE A GOOF IN YOUR PICTURE HAHAHA