Home » Programming » .NET Programming » A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia

    I’ve updated the behavior available in the Expression Community gallery adding Multi-Touch manipulation (translation, rotation and zoom) and inertia effects using code from the Surface Manipulations and Inertia Sample for Microsoft Silverlight.

    To enable Multi-Touch in your code simply download the behavior from here, add the project “MultiTouch.Behaviors.Silverlight” to a Visual Studio solution and then enable the gestures in XAML:

    <UserControl x:Class="SilverlightMultiTouch.MainPage"
    ...
    xmlns:interactivity="clr-namespace:System.Windows.Interactivity; assembly=System.Windows.Interactivity"
    xmlns:behaviors="clr-namespace:MultiTouch.Behaviors.Silverlight; assembly=MultiTouch.Behaviors.Silverlight"
    ...
    >
    
    <Canvas>
      <Image Source="Images/Desert.jpg">
         <interactivity:Interaction.Behaviors>
             <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True" TouchRotateEnabled="True" TouchTranslateEnabled="True" TouchScaleEnabled="True"/>
         </interactivity:Interaction.Behaviors>
      </Image>
    
      <Image Source="Images/Jellyfish.jpg">
         <interactivity:Interaction.Behaviors>
             <behaviors:MultiTouchManipulationBehavior InertiaEnabled="True" TouchRotateEnabled="True" TouchTranslateEnabled="True" TouchScaleEnabled="True"/>
         </interactivity:Interaction.Behaviors>
      </Image>
    </Canvas>
    

    The MultiTouchManipulationBehavior also contains some dependency properties (TouchRotateEnabled, TouchTranslateEnabled, TouchScaleEnabled and InertiaEnabled) to enable the corresponding gestures.

    The example contains Multi-Touch manipulations applied to some Image controls and a Smooth streaming player of the Silverlight Media Framework.

    I’ve also posted to CodePlex a sample using WPF 4 based on the article “Introduction to WPF 4 Multitouch” by Jaime Rodriguez.

    Hope this helps and Happy Silverlighting!

    15 thoughts on “A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia

    1. Adam Kinney says:

      This is great, Davide! Thanks for the new behaviors :)

    2. Davide says:

      Thank you Adam, glad you like it :) Much appreciated!

    3. Eric says:

      Could you please signed the silverlight version of the assembly : Surface manipulation and inertia?

      Thanks for all ! :)

    4. Davide says:

      Hi Eric, I’ve updated the Silverlight version of the assembly. :)

    5. Lew says:

      Thanks, this is great. What’s your recomended aproach to apply this behaviour to a ‘flickable’ list containing text and thumbnail list items?

    6. alsaher2088 says:

      is this work in wpf4 windows applications or not ?

    7. Davide says:

      Hi, you can also find a WPF4 version in the repository of http://multitouch.codeplex.com.

      Thanks,
      Davide

    8. Bruce says:

      Hi,

      Thanks for making this available it’s a great help.

      I do have one question though :-)

      I am trying to get the solution working using MVVM and populating a collection of images from a flickr feed. All good so far, but i am having an issue with the bringToFront method when trying to use a data template on an itemspanel.

      <!– –>

      When the images are added to the mainpage.xaml as per the sample the parent control is the canvas. when the are added using a data template there is either no parent or the parent is the grid in the items control etc…

      I have ended up with the xaml as pasted as that was the only way i seemed to get a full screen where i could move the items using drag drop etc.

      Now either, I’m doing somehting wrong here ( 95% or perhaps the BingToFront method might need to be smarter to find some higher level base canvas.

      If i was clever i’d probably be able to figure it out, but didn;’t want to hack the code without at least asking et..

      Any thoughts on this ??

      Thanks

      B……

      B…..

    9. Bruce says:

      ref above post i did post the xaml, but it seems to have been removed when i posted the comment ??

      B..

    10. Davide says:

      Hi Bruce,thanks for the feedback.
      I’ve opened a new issue on http://multitouch.codeplex.com

      Thanks!
      Davide

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>