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!




January 7th, 2010 at 10:18
[...] Esto es algo que tenia en mente intentar realizar cuando sacase algo de tiempo, pero me alegro que alguien como Davide Zordan lo haya sacado y compartido con nosotros, se trata de un behavior que nos da soporte Multitouch con inercia, tal y como funciona en la Surface, simplificándonos bastante si queremos dar un toque de Multitouch a nuestras aplicaciones, podéis ver el articulo completo esta dirección. [...]
January 7th, 2010 at 14:17
[...] This post was mentioned on Twitter by Kelps Leite de Sousa, Larry King. Larry King said: A Silverlight / Expression Blend behavior to add Multi-Touch … http://bit.ly/7rI0pI #SL #RIA [...]
January 7th, 2010 at 23:22
This is great, Davide! Thanks for the new behaviors
January 7th, 2010 at 23:30
Thank you Adam, glad you like it
Much appreciated!
January 8th, 2010 at 09:59
Could you please signed the silverlight version of the assembly : Surface manipulation and inertia?
Thanks for all !
January 10th, 2010 at 00:54
Hi Eric, I’ve updated the Silverlight version of the assembly.
April 4th, 2010 at 18:06
[...] have already blogged about using Blend behaviors to add Multi-Touch gestures and inertia effects to a generic Silverlight user control, so I wanted to use the same approach to add the same [...]
July 5th, 2010 at 18:58
[...] "A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia" http://www.davidezordan.net/blog/?p=1716 [...]
July 5th, 2010 at 19:15
[...] “A Silverlight / Expression Blend behavior to add Multi-Touch Manipulation and Inertia” http://www.davidezordan.net/blog/?p=1716 [...]
January 12th, 2011 at 21:23
Thanks, this is great. What’s your recomended aproach to apply this behaviour to a ‘flickable’ list containing text and thumbnail list items?
January 26th, 2011 at 12:40
is this work in wpf4 windows applications or not ?
January 26th, 2011 at 12:43
Hi, you can also find a WPF4 version in the repository of http://multitouch.codeplex.com.
Thanks,
Davide
August 18th, 2011 at 00:41
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…..
August 18th, 2011 at 00:43
ref above post i did post the xaml, but it seems to have been removed when i posted the comment ??
B..
August 18th, 2011 at 23:45
Hi Bruce,thanks for the feedback.
I’ve opened a new issue on http://multitouch.codeplex.com
Thanks!
Davide