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

 locked
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.

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

    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?


    Richard
    Tuesday, February 1, 2011 1:03 AM