Question

Thanks in advance..

In my WP7 application I have used following code for zooming an image.

<Image Name="imgThumbnail" Width="480" Height="740" VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5, 0.5" CacheMode="BitmapCache">
    <Image.RenderTransform>
        <CompositeTransform x:Name="transform" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" />
    </toolkit:GestureService.GestureListener>
</Image>

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    var image = sender as System.Windows.Controls.Image;
    if (image == null) return;
    var transform = image.RenderTransform as CompositeTransform;
    if (transform == null) return;
    initialScale = transform.ScaleX;
}
private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    var image = sender as System.Windows.Controls.Image;
    if (image == null) return;
    var transform = image.RenderTransform as CompositeTransform;
    if (transform == null) return;
    transform.ScaleX = initialScale * e.DistanceRatio;
    transform.ScaleY = initialScale * e.DistanceRatio;
}

Zooming is working properly, but I cannot scroll the image. When add a scrollviewer, the zooming is not working. What is the issue and how can I fix this problem?

Answer 1

Try using this library by Laurent Bugnion to do pinch & zoom on an Image: https://multitouch.codeplex.com/ – it handles the calculations you need for a “true” pinch & zoom behavior.

The code will look something like:

<Image CacheMode="BitmapCache" Name="imgThumbnail"  Margin="0,0,0,80" Source="test.jpg">
        <i:Interaction.Behaviors>
            <behaviors:MultiTouchBehavior IsDebugModeActive="False"
                                   AreFingersVisible="True"
                                   IsMockActive="True"                                       
                                   MaximumScale="3"
                                   MinimumScale="0.8"
                                   IsScaleEnabled="True"
                                   IsRotateEnabled="False"
                                   IsTranslateXEnabled="True"
                                   IsTranslateYEnabled="True"/>
        </i:Interaction.Behaviors>
    </Image>

If you do want to try implementing this yourself, I recommend giving this article by Francesco De Vittori a read (http://www.frenk.com/2011/03/windows-phone-7-correct-pinch-zoom-in-silverlight/).