Prise To Zoom-Funktionalität in Windows Phone 8

Question

Von diesem post kam ich zu wissen, dass es einige Plattform Verbesserungen für Implementierung Pinch und Zoom-Funktionalität gibt. Mit dieser neuen Methode (ManipulationDeltaEventArgs.PinchManipulation), wie kann ich Pinch zu Zoom-Funktionalität in Windows Phone implementieren.

Abgesehen davon muss ich Scroll-Funktion auch auf die Bildsteuerung implementieren. In meiner aktuellen Implementierung verwende ich Toolkit (Gesten Listener) für Pinch und Zoom-Funktionalität zusammen mit Scroll-Viewer, jetzt scheint es sowohl Scroll-und Pinching-Ereignisse sind überlappend und daher erzeugt es eine schlechte Benutzererfahrung.

Kann mir jemand helfen, dieses Problem in meiner Anwendung zu lösen. Ich suche ein paar Codebeispiele, die mir helfen, die Funktionalität zu erreichen.

Ich bin nicht erwartet, Multi-Touch-Verhalten (Codeplex) als Antwort zu erhalten. Die Assemblies, die in dem Projekt verwendet werden, sind ziemlich alt und ich habe gehört, dass viele von ihnen nur deshalb mit Problemen bei der Markteinreichung konfrontiert werden.

Answer 1

Wie ich in meinem previous answer, wenn Sie eine WP8 exklusive App Gebäude sind Sie die neue ManipulationDeltaEventArgs.PinchManipulation für pinch & Zoom-Effekte verwenden können. Im Folgenden finden Sie ein einfaches Beispiel für die Verwendung von ManipulationDeltaEventArgs.PinchManipulation Daten zum Skalieren, Verschieben und Drehen eines Bilds.

Zunächst werden wir eine grundlegende Bild schwebt in der Mitte eines Raster erstellen:

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

Als nächstes werden wir die Manipulation Ereignis behandeln, überprüfen, ob es sich um eine Pinch-Manipulation ist und die richtigen Silverlight-Transformationen anwenden auf unserem 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; } 
} 

Hier ist, was wir haben:

• Skalierung: PinchManipulation tatsächlich Spuren für uns Skalierung, so alles, was wir tun mussten, ist PinchManipulation.CumulativeScale Faktor für die Skalierung anzuwenden.
• Transform: PinchManipulation verfolgt die ursprüngliche Mitte und die neue Mitte (berechnet zwischen den beiden Berührungspunkten). Durch Subtrahieren des neuen Zentrums von dem alten Zentrum können wir sagen, wie viel das UIElement bewegen muss und das auf eine Translate-Transformation anwenden muss. Beachten Sie, dass eine bessere Lösung hier auch mehrere Manipulationssitzungen berücksichtigen würde, indem Sie kumulative ursprüngliche Zentren verfolgen, die dieser Code nicht hat.
• Rotation: Wir ermittelten den Winkel zwischen den beiden Berührungspunkten und wendeten ihn als Rotationstransformation an.Mehr dazu in diesem Nokia Wiki-Artikel @Real-time rotation of the Windows Phone 8 Map Control

Hier ein paar Druck-Taste diesen Code zeigt läuft ganz gut:

Answer 2

Wenn Sie schauen, um Ihre eigene Rolle, könnten Sie diesen Artikel über Pinch in Silverlight Zoomen prüfen wollen: Implementing pinch zoom correctly in Silverlight

Telerik hat auch eine aus der Box Schwenk- und Zoom-Bildsteuerung, aber es funktioniert kosten Geld: Telerik Pan and Zoom Control

Answer 3

ich die perfekte soultion für glatte Prise gefunden zoomen und schwenken. Es ist tatsächlich ein Microsoft Codebeispiel unter dem folgenden Link http://code.msdn.microsoft.com/wpapps/Image-Recipes-0c0b8fee

Ich habe es nur als Boiler Platte Code verwendet und es hat Wunder gewirkt.

Prost