Well, this turned out to be pretty easy ……
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>
<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;
{
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…
The code is available here…
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???
I’ve heard some good things about this blog. Remember to balance the pics with the text tho. cheers!
Thanks for the comment – I’ll try to improve the balance 🙂
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.
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.
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.
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
How to use pinch zoom with image….
Thanks for sharing this information.