The following forum(s) have migrated to Microsoft Q&A (Preview): Developing Universal Windows apps!
Visit Microsoft Q&A (Preview) to post new questions.

Learn More

Multi-Touch Pinch To Zoom on Image RRS feed

  • General discussion

  • Hi,

    I am trying to show a page which shows a map image which the user can pan around and also use pinch or double tap to zoom in and out. I have seen someone do this using a ScrollViewer. This is nice because it gives you panning, nice flick accelleration effects and scroll bars for free. The only thing I want to add is the Zooming. I'm not interested in rotation.

    I have tried using the code below which I found online and this works but then the ScrollViewer stops working and you are stuck looking at the top left corner of the image. I think I need to be modifying the images Height and Width instead of using a RenderTransform. How do I go about doing this.

        <Image Source="...">
            <CompositeTransform x:Name="ImageTransformation" />
            <toolkit:GestureListener PinchStarted="OnPinchStarted"
                                             PinchDelta="OnPinchDelta" />

    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
        _initialScale = ImageTransformation.ScaleX;

        // calculate the center for the zooming
        Point firstTouch = e.GetPosition(MyImage, 0);
        Point secondTouch = e.GetPosition(MyImage, 1);
        Point center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X) / 2.0,
                                    firstTouch.Y + (secondTouch.Y - firstTouch.Y) / 2.0);
        ImageTransformation.CenterX = center.X;
        ImageTransformation.CenterY = center.Y;

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
        ImageTransformation.ScaleX = _initialScale * e.DistanceRatio;
        ImageTransformation.ScaleY = ImageTransformation.ScaleX;
    Monday, January 31, 2011 9:24 AM

All replies

  • CompositeTransform does translation x and y as well as scale, so you should be able to use it for zoom and panning too. In the ManipulationDelta event add the following to pan

    compositeTransform.TranslateX += e.DeltaManipulation.Translation.X;
    compositeTransform.TranslateY += e.DeltaManipulation.Translation.Y;
    Tuesday, February 1, 2011 12:15 AM
  • The Windows Phone Silverlight Toolkit has gesture sample code that includes panning along with pinch and rotation. Perhaps you missed it because the samples are in a separate download (see "Other Available Downloads" on that page).

    The sample provided uses a solid rectangle for demonstration. In this thread I changed it to an image, and improved the pinch action: GOOD pinch zoom?

    Tuesday, February 1, 2011 1:03 AM