windows-phone-7 - recuperacion - modo ingeniero windows phone

Funcionalidad Pinch To Zoom en Windows Phone 8

Question

A partir de este post, llegué a saber que existen algunas mejoras en la plataforma para implementar la funcionalidad de pellizcar y hacer zoom. Al usar este nuevo método ( ManipulationDeltaEventArgs.PinchManipulation ) cómo puedo implementar la funcionalidad de pellizcar para acercar en Windows Phone.

Además de esto, necesito implementar la función de desplazamiento también para el control de imagen. En mi implementación actual, estoy usando Toolkit (detector de gestos) para la función de pellizcar y acercar junto con el visor de desplazamiento, ahora parece que los eventos de desplazamiento y pellizco se superponen y, por lo tanto, produce una mala experiencia de usuario.

¿Alguien puede ayudarme a resolver este problema en mi aplicación? Estoy buscando algunos ejemplos de código que me ayuden a lograr la funcionalidad.

No se espera que obtenga el comportamiento Multi touch (codeplex) como respuesta. Las asambleas que usan en el proyecto son bastante antiguas y he oído que muchos de ellos están enfrentando problemas con la presentación del mercado solo por esto.

Answer 1

Si estás buscando rodar el tuyo, es posible que desees consultar este artículo sobre el zoom pellizco en Silverlight: Implementar el zoom pellizco correctamente en Silverlight

Telerik también tiene un control de imagen panorámica y de zoom, pero cuesta dinero: Telerik Pan y Zoom Control

Answer 2

Encontré el soultion perfecto para pellizcar suavemente para hacer zoom y pan. En realidad, es una muestra de Microsoft Code en el siguiente enlace http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

Lo usé como código de placa de caldera y funcionó de maravilla.

Aclamaciones

Answer 3

Como dije en mi respuesta anterior, si está compilando una aplicación exclusiva para WP8, puede usar la nueva manipulación ManipulationDeltaEventArgs.PinchManipulation para efectos de pellizco y zoom. Aquí hay un ejemplo básico de cómo usar ManipulationDeltaEventArgs.PinchManipulation data para escalar, mover y rotar una imagen.

Primero, crearemos una imagen básica flotando en el medio de una grilla:

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

A continuación, gestionaremos el evento ManipulationDelta, comprobaremos si se trata de una Manipulación de pellizco y aplicaremos las transformaciones de Silverlight correctas en nuestro 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; }
}

Esto es lo que hicimos:

• Escalado: PinchManipulation realmente rastrea el escalado para nosotros, por lo que todo lo que teníamos que hacer era aplicar PinchManipulation.CumulativeScale al factor de escala.
• Transformar: PinchManipulation rastrea el centro original y el nuevo centro (calculado entre los dos puntos de contacto). Al restar el nuevo centro del antiguo centro podemos decir cuánto necesita mover el UIElement y aplicarlo a una transformación de traducción. Tenga en cuenta que una mejor solución aquí también representaría múltiples sesiones de Manipulación al rastrear centros originales acumulativos que este código no tiene.
• Rotación: Calculamos el ángulo entre los dos puntos de contacto y lo aplicamos a medida que se transforma la rotación. Más sobre eso en este artículo de Nokia wiki @ Rotación en tiempo real del control de mapa de Windows Phone 8

Aquí hay algunas pantallas de impresión que muestran que este código funciona bien: