Multi touch i VS2010

Touch och multi touch är något som har legat mig varmt om hjärtat senaste året. Det hela började med att vi på Connecta köpte ett Microsoft Surface-bord för snart ett år sedan. Redan då pratade Microsoft om vikten av att börja jobba med och lära sig multi touch och nu ser vi Windows 7 och WPF 4.0 komma med inbyggt stöd för multi touch.

I WPF 4.0 har man lagt till ett antal event till UIElement som rör muti touch. De berörda .NET API:er är baserar på native Win32 API som bara är tillgängliga i Windows 7. UIElement är den basklass som definierar kärnan för visuella kontroller för layout, input och events. De event som finns idag (beta 1 av VS2010) är: ManipulationStarted Event, ManipulationCompleted Event, ManipulationDelta Event, ManipulationInertiaStarting Event och ManipulationBoundaryFeedback Event. Som standard får ett UIElement aldrig händelser rörande Manipulation om inte ManipulationMode är satt till ett annat värde än None. Med hjälp av ManipulationMode kan man styra vilken typ av manipuleringar man ska kunna göra på ett objekt. Det kan t ex vara translatera på X och/eller Y-axeln, rotera, eller skala.

I beta 1 av .NET Framework 4.0 finns eventen för manipulering med men det finns inte några WPF-kontroller som använder sig av dem. I kommande versioner kommer det att man enkelt bara slå på touch-kontroller på t ex sliders eller scrollviewers direkt i XAML.

När man fångar ManipulationDelta på ett Window får man ManipulationDeltaEventArgs. Den kan man sedan använda för att ta reda på vilken förändring som har inträffat. Med metoden GetDeltaManipulation får man ut en System.Windows.Input.Manipulation som innehåller all transformationsdata som fanns när eventet inträffade. Den informationen kan man sedan använda för att utföra translateringar på objektet. Lite komplext men ett kodexempel gör det nog enklare att förstå!

Observera att ManipulationDelta aldrig kommer att exekveras med en vanlig mus utan det måste vara något slags touch device. Med hjälp av ett projekt på CodePlex som heter Multi-Touch Vista kan man simulera användandet av flera touchpunkter med vanlig mus eller touch pad.

I xaml-filen lägger jag till en bild i en canvas. Till den kopplar jag en MatrixTransform så att jag sedan kan komma åt den från kod. Jag lägger också till en event handler för ManipulationDelta.

<Window   x:Class="WpfApplication13.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" 
        WindowState="Maximized" ManipulationDelta="Window_ManipulationDelta">
    <Window.Resources>
        <MatrixTransform x:Key="InitialMatrixTransform">
            <MatrixTransform.Matrix>
                <Matrix OffsetX="200" OffsetY="200"></Matrix>
            </MatrixTransform.Matrix>
        </MatrixTransform>
    </Window.Resources>
    <Canvas>
        <Image Width="100" Source="/WpfApplication13;component/Images/Sonicspree.jpg" ManipulationMode="All" RenderTransform="{StaticResource InitialMatrixTransform}" ></Image>
    </Canvas>
</Window>

I code behind använder jag ManipulationDelta för att flytta bilden baserat på input:

private void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    var delta = e.GetDeltaManipulation(this);
    var image = e.OriginalSource as Image;
    var matrix = ((MatrixTransform)image.RenderTransform).Matrix;
    var originalCenter = new Point(image.ActualWidth / 2, image.ActualHeight / 2);

    //Translate on the x and y-axis
    matrix.Translate(delta.Translation.X, delta.Translation.Y);

    //Get the new center point and rotate around that based on the delta
    var center = matrix.Transform(originalCenter);
    matrix.RotateAt(delta.Rotation, center.X, center.Y);
    center = matrix.Transform(originalCenter);

    //Scale the matrix based on the delta
    matrix.ScaleAt(delta.Scale, delta.Scale, center.X, center.Y);

    //Apply the new MatrixTransform
    image.RenderTransform = new MatrixTransform(matrix);

    e.Handled = true;

}

Notera de två röda prickarna som symboliserar de två möss jag har koppad till den här datorn. Koden i exemplet är baserat på en video på You Tube som också visar applikationen in action.