Metro, Windows 8, WinRT

metro c#–simple transform using touch

Well, this turned out to be pretty easy Smile……

The aim was to carry out a simple image transform with touch; so pinch zoom, translate and rotate. This is how the code turned out.

First, the xaml, which is an Image inside a Canvas…

 

<Canvas>
    <Image x:Name="myImage"
           ManipulationMode="All"
           ManipulationDelta="Image_ManipulationDelta_1"
           RenderTransformOrigin="0.5, 0.5">
        <Image.RenderTransform>
            <CompositeTransform></CompositeTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

 

Then the event handler for the ManipulationDelta event

 

private void Image_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var ct = (CompositeTransform)myImage.RenderTransform;
    ct.ScaleX *= e.Delta.Scale;
    ct.ScaleY *= e.Delta.Scale;
    ct.TranslateX += e.Delta.Translation.X;
    ct.TranslateY += e.Delta.Translation.Y;
    ct.Rotation += 180.0 / Math.PI * e.Delta.Rotation;

    UpdateControls(ct);
}

 

And here’s the sample running on my Build slate…

 

PinchZoomSpam

 

The code is available here…

https://skydrive.live.com/redir.aspx?cid=4f1b7368284539e5&resid=4F1B7368284539E5!443&parid=4F1B7368284539E5!123

Tagged , , , , , ,

9 thoughts on “metro c#–simple transform using touch

  1. Hi… These transformations are temporary Can you tell me how to reflect them on the image after performing certain tasks. I mean any way to save the transformed image???

  2. When I try this, only the Translate works. I can drag the image around with my finger, but I can’t make it scale or rotate. Scale always shows as 1 and rotate as 0. Any idea what could be wrong? Your code won’t run as-is, so I just copied the BlankPage XAML and CS files into my own app.

    I’m running Win8 RTM and VS Pro 2012 RTM.

    Thanks.

    1. Never mind. I discovered that the N-Trig Duo drivers had not installed on Windows 8, so I just had touch screen capability, not multi-touch. Doh! It’s working now.

  3. Hello I can not work the applicaiton.

    Error 1 ‘Windows.UI.ViewManagement.ApplicationView’ does not contain a definition for ‘GetForCurrentView’
    Error 2 The type or namespace name ‘ApplicationViewStateChangedEventArgs’ could not be found (are you missing a using directive or an assembly reference?)
    How can I correct them.

  4. Hi, What is the function call UpdateControls(ct);
    Can I get the source for that too as the link below the article to the source code does not work for me.
    Thanks

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.