Home  separator  Input  separator  Mutli Touch
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


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);
    }
}
 
 




Last modified: 2010-05-17 23:52:20
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
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
another-
Commented on 5.October 2010
The title in the menu system under "Input">"Mutli Touch" is not spelled correctly. (someone else commented in January but you still haven't fixed it. :P
Eduardo
Commented on 9.December 2010
I Christian!!!
You are using manipulationdelta, but if i want define a new gesture, how can i do?, example, fix one touch, and second touch move vertical that mean in 3D rotate axis X, another example, if i fix one touch and second touch move horizontal that mean in 3d rotate axis Y
please i hope your answer.
Myth
Commented on 2.February 2011
another-
This guy just copied and pasted bits and pieces of tutorials onto his own website (look in the comment sections on multiple of the 'tutorials' he even admits it lol); I'm sure the typos are in the source as well
Kuldeep Verma
Commented on 16.February 2011
Nice WOrk..
Mutli
Commented on 28.February 2011
Mutley touch? menu fail mutlitouch
B. Clay Shannon
Commented on 10.May 2011
Yes, mutlitouch is a new pattern, paradigm, or practice where you code with a pooch at your side.

Name
E-Mail (optional)
Comment