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
Pinch To Zoom functionality in windows phone 8 RRS feed

  • Question

  • From this post ("http://stackoverflow.com/questions/13720032/pinch-and-zoom-behaviour-for-windows-phone") i came to know that there exist some platform improvements for implementing pinch and zoom functionality. By using this new method("ManipulationDeltaEventArgs.PinchManipulation") how i can implement pinch to zoom functionality in windows phone.

    Apart from this i need to implement scrolling feature too to the image control. In my current implementation, i am using Toolkit(gesture listener) for pinch and zoom functionality along with scroll viewer, now it seem both scrolling and and pinching events are overlapping and hence it produces a bad user experience.

    Can anyone help me to solve this issue in my application. I am looking some code samples that help me to achieve the functionality.

    I am not expected to get Multi touch behavior(codeplex) as answer. The assemblies using in the project are quite old and i heard that many of them are facing issues with marketplace submission only because of this.


    • Edited by StezPet Thursday, December 20, 2012 10:06 AM
    Thursday, December 20, 2012 10:03 AM

Answers

  • First, we'll create a basic image hovering in the middle of a grid:

    <Grid x:Name="ContentPanel"> <Image Source="Assets\Headset.png" Width="200" Height="150" ManipulationDelta="Image_ManipulationDelta" x:Name="img" > <Image.RenderTransform> <CompositeTransform CenterX="100" CenterY="100" /> </Image.RenderTransform> </Image> </Grid>

    Next, we'll handle the ManipulationDelta event, check if it's a Pinch Manipulation and apply the correct Silverlight transformations on our UIElement

    private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        if (e.PinchManipulation != null)
        {
            var transform = (CompositeTransform)img.RenderTransform;
    
            // Scale Manipulation
            transform.ScaleX = e.PinchManipulation.CumulativeScale;
            transform.ScaleY = e.PinchManipulation.CumulativeScale;
    
            // Translate manipulation
            var originalCenter = e.PinchManipulation.Original.Center;
            var newCenter = e.PinchManipulation.Current.Center;
            transform.TranslateX = newCenter.X - originalCenter.X;
            transform.TranslateY = newCenter.Y - originalCenter.Y;
    
            // Rotation manipulation
            transform.Rotation = angleBetween2Lines(
                e.PinchManipulation.Current, 
                e.PinchManipulation.Original);
    
            // end 
            e.Handled = true;
        }
    }
    
    // copied from http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
    public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
    {
        if (line1 != null && line2 != null)
        {
            double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                       line1.PrimaryContact.X - line1.SecondaryContact.X);
            double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                       line2.PrimaryContact.X - line2.SecondaryContact.X);
            return (angle1 - angle2) * 180 / Math.PI;
        }
        else { return 0.0; }
    }

    • Proposed as answer by Andrew Leonce Friday, March 15, 2013 10:49 AM
    • Marked as answer by StezPet Wednesday, May 29, 2013 10:38 AM
    Wednesday, December 26, 2012 6:21 AM

All replies

  • First, we'll create a basic image hovering in the middle of a grid:

    <Grid x:Name="ContentPanel"> <Image Source="Assets\Headset.png" Width="200" Height="150" ManipulationDelta="Image_ManipulationDelta" x:Name="img" > <Image.RenderTransform> <CompositeTransform CenterX="100" CenterY="100" /> </Image.RenderTransform> </Image> </Grid>

    Next, we'll handle the ManipulationDelta event, check if it's a Pinch Manipulation and apply the correct Silverlight transformations on our UIElement

    private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
    {
        if (e.PinchManipulation != null)
        {
            var transform = (CompositeTransform)img.RenderTransform;
    
            // Scale Manipulation
            transform.ScaleX = e.PinchManipulation.CumulativeScale;
            transform.ScaleY = e.PinchManipulation.CumulativeScale;
    
            // Translate manipulation
            var originalCenter = e.PinchManipulation.Original.Center;
            var newCenter = e.PinchManipulation.Current.Center;
            transform.TranslateX = newCenter.X - originalCenter.X;
            transform.TranslateY = newCenter.Y - originalCenter.Y;
    
            // Rotation manipulation
            transform.Rotation = angleBetween2Lines(
                e.PinchManipulation.Current, 
                e.PinchManipulation.Original);
    
            // end 
            e.Handled = true;
        }
    }
    
    // copied from http://www.developer.nokia.com/Community/Wiki/Real-time_rotation_of_the_Windows_Phone_8_Map_Control
    public static double angleBetween2Lines(PinchContactPoints line1, PinchContactPoints line2)
    {
        if (line1 != null && line2 != null)
        {
            double angle1 = Math.Atan2(line1.PrimaryContact.Y - line1.SecondaryContact.Y,
                                       line1.PrimaryContact.X - line1.SecondaryContact.X);
            double angle2 = Math.Atan2(line2.PrimaryContact.Y - line2.SecondaryContact.Y,
                                       line2.PrimaryContact.X - line2.SecondaryContact.X);
            return (angle1 - angle2) * 180 / Math.PI;
        }
        else { return 0.0; }
    }

    • Proposed as answer by Andrew Leonce Friday, March 15, 2013 10:49 AM
    • Marked as answer by StezPet Wednesday, May 29, 2013 10:38 AM
    Wednesday, December 26, 2012 6:21 AM
  • Hi Guys,

    Weird styling on the above post btw. I found a Microsoft Code Sample recently which illustrates Smooth pinch to zoom and pan. I used it as boilerplate code in my project and it worked wonders. 

    (My account is still unverified so I am just pasting the link below, please copy it)

    Here is the link http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

    I hope this helps somebody

    Friday, May 17, 2013 12:12 AM
  • When I implement this, each successive Manipulation series, seems to reset the transformation. Is there a way to start where the previous manipulation ended?
    Wednesday, December 25, 2013 8:57 PM