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. Pingback: Silverlight/WPF behavior Para Añadir Multitouch e Inercia - Blog de Oskar Alvarez

  2. Pingback: Tweets that mention A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia | DavideZordan.net -- Topsy.com

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

    Thanks for all ! :)

  4. Pingback: Multi-Touch enabling Silverlight Simon using Blend behaviors and the Surface sample for Silverlight | DavideZordan.net

  5. Pingback: 윈도우폰7(14)-윈도우폰7에서 멀티터치 구현은 어떻게? - 서진호의 윈도우폰7 이야기 - Site Home - MSDN Blogs

  6. Pingback: Blog Post: 윈도우폰7(14)-윈도우폰7에서 멀티터치 구현은 어떻게? | IT.beta

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

  8. 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…..

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>