Een van de meest voor de hand liggende multitouch-toepassingen is het manipuleren van beelden: scale, rotate and translate. Met de Manipulation events van WPF4 (op Windows 7) is dit eenvoudig. Het komt erop neer de matrix van de transformatie aan te passen.

In een eenvoudig voorbeeld, bleek dit te werken. Maar in een echt project-voorbeeld kreeg ik het verkleinen/vergroten en roteren niet goed. Het leek alsof deze gebeurden tegenover een center-punt dat ver buiten het gemanipuleerd object lagen. Na lang zoeken en een paar suggesties van Anson Tsao kwam ik eruit.

Het exact positioneren van een image door middel van Canvas.Top en Canvas.Left conflicteert met het gebruik van RenderTransformations.  Je kan beter je positionering in de MatrixTransformation zetten:

<Image Source=”/TouchTransformIssue;component/images/Koala.jpg” Width=”200″ x:Name=”imageKoala” IsManipulationEnabled=”True”>
<Image.RenderTransform>
<MatrixTransform Matrix=”1,0,0,1,200,100″/>
</Image.RenderTransform>
</Image>

In bijgaande code kan je het effect zien door Canvas.Top/Canvas.Left te gebruiken.

(download code)