Aspect ratio changes on scrolling the zoomed image in Wp7

Question

I have an image in a scrollviewer.The image has Pinch in and out feature implemented on it. But while scrolling the zoomed image,the aspect ratio changes and images becomes distorted. Following the xaml:

 <ScrollViewer HorizontalScrollBarVisibility="Auto"  VerticalScrollBarVisibility="Auto" Name="scroller" >
            <Image  Name="image_new"   Visibility="Visible"    CacheMode="BitmapCache"   >
                <Image.RenderTransform >
                <CompositeTransform x:Name="transform"/>
                </Image.RenderTransform >
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener  Flick="OnFlick" PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta"  DoubleTap="Onimage_doubletap" Tap="Onimage_singletap" />

                </toolkit:GestureService.GestureListener>

            </Image>
        </ScrollViewer>

And in the .cs file the methods are :

  private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    {

        Point point0 = e.GetPosition(image_new, 0);
        Point point1 = e.GetPosition(image_new, 1);
        Point midpoint = new Point((point0.X + point1.X) / 2, (point0.Y + point1.Y) / 2);
        image_new.RenderTransformOrigin = new Point(midpoint.X / image_new.ActualWidth, midpoint.Y / image_new.ActualHeight);
        initialScale = transform.ScaleX;

    }

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {

        transform.ScaleX = Math.Max(Math.Min(initialScale * e.DistanceRatio, 3.0), 0.5);
        transform.ScaleY = Math.Max(Math.Min(initialScale * e.DistanceRatio, 3.0), 0.5);

    }

Answer 1

I think the problem here is that you are changing the RenderTransformOrigin for each pinch gesture, which is resulting in the distortion. I would try leaving the RenderTransformOrigin fixed at 0.5,0.5 to ensure that you get an even scale.

I assume you were moving the origin to try to zoom into/out of the part of the image that the user had started the gesture on. To achieve this, I think you will need to enable the user to pan around the image once zoomed in.

One other point, the scale factor is always the same, so you shoudl just calculate it once, and then assign it to both ScaleX and ScaleY .