Pinch To Zoom functionality in windows phone 8

问题:

From this post 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.

回答1:

As I said in my previous answer if you're building a WP8 exclusive app you can use the new ManipulationDeltaEventArgs.PinchManipulation for pinch & zoom effects. Here's a basic example of how to use ManipulationDeltaEventArgs.PinchManipulation data to scale, move and rotate an image.

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="75" />
        </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; }
}

Here's what we did:

• Scaling: PinchManipulation actually tracks scaling for us, so all we had to do is apply PinchManipulation.CumulativeScale to the scaling factor.
• Transform: PinchManipulation tracks the original center and the new center (calculated between the two touch points). By subtracting the new center from the old center we can tell how much the UIElement needs to move and apply that to a translate transform. Note that a better solution here would also account for multiple Manipulation sessions by tracking cumulative original centers which this code doesn't.
• Rotation: We figured out the angle between the two touch points and applied it as the rotation transform. More on that in this Nokia wiki article @ Real-time rotation of the Windows Phone 8 Map Control

Here's a few print screens showing this code runs just fine:

回答2:

I found the perfect soultion for smooth pinch to zoom and pan. It is actually a Microsoft Code sample at the following link http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

I just used it as boiler plate code and it worked wonders.

Cheers

回答3:

If you're looking to roll your own, you might want to check out this article about pinch zooming in Silverlight: Implementing pinch zoom correctly in Silverlight

Telerik also has an out of the box pan and zoom image control, but it does cost money: Telerik Pan and Zoom Control