04
Apr
12

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

About these ads

8 Responses to “metro c#–simple transform using touch”


  1. 1 Harsha
    April 16, 2012 at 3:24 pm

    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. July 20, 2012 at 8:26 am

    I’ve heard some good things about this blog. Remember to balance the pics with the text tho. cheers!

  3. 4 Henri Fournier
    August 20, 2012 at 3:38 am

    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.

    • 5 Henri Fournier
      August 21, 2012 at 1:25 am

      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.

  4. September 12, 2012 at 11:51 am

    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.

  5. 7 Kasim
    November 28, 2012 at 10:32 pm

    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

  6. 8 Saharsh
    May 2, 2013 at 6:28 am

    How to use pinch zoom with image….


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: