Windows 8.1 Metro app - Pinch and zoom an Image

Question

Is there any way to implement pinch and zoom the image control inside XAML in Windows 8.1, i am trying Manipulation delta event. But that event not get fired, also i tried setting ManipulationMode="All".

<Image x:Name="kn" ManipulationMode="All" ManipulationDelta="kn_ManipulationDelta" HorizontalAlignment="Center" VerticalAlignment="Center" Height="315" Width="360" RenderTransformOrigin="0.5, 0.5">
  <Image.RenderTransform>
  <CompositeTransform></CompositeTransform>
  </Image.RenderTransform>
</Image>

And in cs file

private void kn_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
 UIElement element = sender as UIElement;
 CompositeTransform transform = element.RenderTransform as CompositeTransform;
 if (transform != null)
 {

 transform.ScaleX *= e.Delta.Scale;
 transform.ScaleY *= e.Delta.Scale;
 transform.Rotation += e.Delta.Scale / Math.PI;
 transform.TranslateX += e.Delta.Translation.X;
 transform.TranslateY += e.Delta.Translation.Y;
 }
}

Is there anything i have to set. Or i have to go with some other way?

Answer 1

You can achieve this easily by wrapping your image with a ScrollViewer control.

<ScrollViewer ZoomMode="Enabled">
    <Image ............ />
</ScrollViewer>

Answer 2

In XAML make your code like this..

<ScrollViewer x:Name="scrl" ZoomMode="Enabled" HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" SizeChanged="OnSizeChanged" MinZoomFactor="1">
        <Canvas MaxWidth="1400" Background="AliceBlue" RenderTransformOrigin="0.5,0.5" x:Name="Main" DoubleTapped="Main_OnDoubleTapped">
            <Image Source="Assets/Floorplan.gif" Canvas.Left="358" Canvas.Top="84"></Image>
        </Canvas>
    </ScrollViewer>

then in code behind..

 private void OnSizeChanged(Object sender, SizeChangedEventArgs args) {

        Main.Width = scrl.ViewportWidth;
        Main.Height = scrl.ViewportHeight;




    }

Explanation: You will see in there that i wrapped the image inside the canvas then wrapped the canvas inside the scrollviewer. Then the event in the scrollviewer the SizeChanged=OnSizeChanged. In the code behind the canvas' width and height was set to scrollviewer's ViewportWidth and ViewportHeight. Just follow the code and change the image to your desired one and see the results. hope this will solve your problem.