ASP.Net  »  Articoli  »  Silverlight 

Utilizzo di gesture complesse: manipulation e inertia

L'impiego di una (o più) Blend behavior per l'abilitazione di funzionalità multi-touch rende, a mio avviso, il codice molto elegante, modificabile via Blend e semplice da riutilizzare in progetti diversi. A questo scopo, a partire dal Surface Manipulation and Inertia Sample for Silverlight già menzionato, ho realizzato una Silverlight/Blend Behavior disponibile per il download all'indirizzo http://gallery.expression.microsoft.com/en-us/MultiTouch.

Tale codice permette l'abilitazione delle seguenti gesture ad un generico FrameworkElement:

• Drag/Traslazione dell'elemento con uno o più touch point;
• Scale/Zoom con due dita;
• Rotation/Rotazione con due dita;
• Effetto "inertia" per l'applicazione di effetti di accelerazione/decelerazione alle gesture precedentemente elencate.

L'utilizzo in XAML è riportato di seguito:

Listato 8: manipolazione complesse

<Canvas>
  <Image Source="Images/Desert.jpg" x:Name="image1">
    <interactivity:Interaction.Behaviors>
      <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True"
                                                TouchRotateEnabled="True"
                                                TouchTranslateEnabled="True"
                                                TouchScaleEnabled="True" />
    </interactivity:Interaction.Behaviors>
  </Image>
  
  <p:CoreSmoothStreamingMediaElement x:Name="video" Background="{StaticResource GlossyBlack_BackgroundGradient}"
                                     AutoPlay="True" SmoothStreamingSource="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest">
    <interactivity:Interaction.Behaviors>
      <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True"
                                                TouchRotateEnabled="True"
                                                TouchTranslateEnabled="True"
                                                TouchScaleEnabled="True"/>
    </interactivity:Interaction.Behaviors>
  </p:CoreSmoothStreamingMediaElement>
  
  <Image Source="Images/Jellyfish.jpg" x:Name="image2">
    <interactivity:Interaction.Behaviors>
      <behaviors:MultiTouchManipulationBehavior InertiaEnabled="False"
                                                TouchRotateEnabled="False"
                                                TouchTranslateEnabled="True"
                                                TouchScaleEnabled="True"/>
    </interactivity:Interaction.Behaviors>
  </Image>
</Canvas>

Di seguito (figura 3) è possibile visualizzare l'utilizzo della Behavior in Expressio Blend

Figura 3: Utilizzo della MultiTouchManipulationBehavior in Blend

Altri articoli

Altre guide

Altre newsletter