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!

Visual Studio 2010 Beta 2 and updated Silverlight Toolkit available

Lot of news this week!

Visual Studio 2010 and .NET Framework 4 Beta 2 are now available for download here, Jeff Beehler has posted some useful info about this “go live” release.

The new Silverlight Toolkit October 2009 Release is also available on Codeplex featuring Visual Studio 2010 support and various improvements on existing components (like drag-and-drop for items controls).

Read these posts by Tim Heuer and Jeff Wilcox for more details and enjoy!

A WPF custom control for enabling Windows 7 Multi-touch gestures

Windows 7 is now available, it’s time to build new user experiences using the new stuff, like multi-touch!

To play with this new feature, I have started a Codeplex project at http://multitouch.codeplex.com containing a first WPF custom control (and some Silverlight 3 behaviors, check out the next posts for more info) to enable touch drag, zoom and rotation gestures using the .NET wrapper classes available on http://code.msdn.microsoft.com/WindowsTouch (see also my other post about the same topic).

The touch events are managed in the ApplyTemplate method:

       public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (Windows7.Multitouch.TouchHandler. DigitizerCapabilities.IsMultiTouchReady)
            {
                //Find the Window containing the CustomControl
                DependencyObject dpParent = this;
                do { dpParent = LogicalTreeHelper.GetParent(dpParent); } while (dpParent.GetType().BaseType != typeof(Window));
                //Enable Stylus events
                if (dpParent != null) Factory.EnableStylusEvents(dpParent as Window);

                //Get the touch Area
                UIElement touchArea = (UIElement)GetTemplateChild("_touchArea");

                //Handle Stylus events
                if (touchArea != null)
                {
                   this.StylusDown += (s, e) => { _processor.ProcessDown((uint)e.StylusDevice.Id, e.GetPosition(touchArea).ToDrawingPointF()); };
                   this.StylusUp += (s, e) => { _processor.ProcessUp((uint)e.StylusDevice.Id, e.GetPosition(touchArea).ToDrawingPointF()); };
                   this.StylusMove += (s, e) => { _processor.ProcessMove((uint)e.StylusDevice.Id, e.GetPosition(touchArea).ToDrawingPointF()); };

                   //Handle the ManipulationDelta and the gestures
                   this._processor.ManipulationDelta += ProcessManipulationDelta;
                   this._processor.PivotRadius = 2;
                }
            }
        }

When the ManipulationDelta event occurs, the ProcessManipulationDelta handler applies the Rotate, Translate and Scale transforms:

        private void ProcessManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            if (this.MultiTouchEnabled)
            {
                TranslateTransform _translate = (TranslateTransform)GetTemplateChild("_translate");
                if (_translate != null)
                {
                    _translate.X += e.TranslationDelta.Width;
                    _translate.Y += e.TranslationDelta.Height;
                }

                RotateTransform _rotate = (RotateTransform)GetTemplateChild("_rotate");
                if (_rotate != null)
                    _rotate.Angle += e.RotationDelta * 180 / Math.PI;

                ScaleTransform _scale = (ScaleTransform)GetTemplateChild("_scale");
                if (_scale != null)
                {
                    _scale.ScaleX *= e.ScaleDelta;
                    _scale.ScaleY *= e.ScaleDelta;
                }
            }
        }

A dependency property named MultiTouchEnabled is also defined in order to enable and disable the touch features directly using XAML:

        public bool MultiTouchEnabled
        {
            get { return (bool)GetValue(MultiTouchEnabledProperty); }
            set { SetValue(MultiTouchEnabledProperty, value); }
        }

        public static readonly DependencyProperty MultiTouchEnabledProperty =
            DependencyProperty.Register("MultiTouchEnabled", typeof(bool), typeof(MultiTouchView), null);

The usage of this custom control is very simple, just wrap the code you want to touch-enable in this way:

<Window x:Class="WpfMultiTouch.MultiTouchWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Multi Touch gestures example" Width="1280" Height="800"
    xmlns:myControls="clr-namespace:MultiTouch.Controls.WPF; assembly=MultiTouch.Controls.WPF"
        >
    <Canvas Background="Black">
        <myControls:MultiTouchView MultiTouchEnabled="True">
            <myControls:MultiTouchView.Template>
                <ControlTemplate>
                    <Canvas x:Name="_touchArea">
                        <Viewbox RenderTransformOrigin="0.5, 0.5">
                            <Image Source="Images/image.png" Width="500"/>
                            <Viewbox.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform x:Name="_rotate" Angle="0"/>
                                    <ScaleTransform x:Name="_scale" ScaleX="1" ScaleY="1"/>
                                    <TranslateTransform x:Name="_translate" X="0" Y="0"/>
                                </TransformGroup>
                            </Viewbox.RenderTransform>
                        </Viewbox>
                    </Canvas>
                </ControlTemplate>
            </myControls:MultiTouchView.Template>
        </myControls:MultiTouchView>
    </Canvas>
</Window>

This approach is very powerful, it’s possible to enable multi-touch gestures by simply wrapping the objects inserted in the XAML code inside the MultiTouchView custom control.

The source code is available on Codeplex, including a basic Silverlight 3 implementation using the new touch APIs and behaviors.

Multi Touch enabling your WPF application

Recently I had the possibility to work on some multi-touch stuffs using the .NET wrappers for the touch APIs included in Windows 7 RC.

Do you remember Simon? As described by Wikipedia:

Simon is an electronic game of rhythm and memory skill invented by Ralph H. Baer and Howard J. Morrison,[1] with the software programming being done by Lenny Cope and manufactured and distributed by Milton Bradley. Simon was launched in 1978 at Studio 54 in New York City and became an immediate success. It became a pop culture symbol of the 1980s.”

And… here we go, let’s connect to http://simon.codeplex.com and play with the Silverlight on-line version built by David J Kelley:

Simon

How to add basic multi touch gestures (rotation, scale and transform) to the WPF version? It’s quite impressive to look at the amount of code required using the Windows 7 Multitouch .NET Interop Sample Library: just insert some transforms in the User Control XAML

<Viewbox x:Name="_simon" RenderTransformOrigin="0.5, 0.5">
<uc:Simon/>
<Viewbox.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="_rotate" Angle="0"/>
<ScaleTransform x:Name="_scale" ScaleX="1" ScaleY="1"/>
<TranslateTransform x:Name="_translate" X="0" Y="0"/>
</TransformGroup>
</Viewbox.RenderTransform>
</Viewbox>

And then use this code to control the TransformGroup using the Multi touch engine:

using System;
using System.Windows;
using Windows7.Multitouch.Manipulation;
using Windows7.Multitouch.WPF;

namespace SimonWPF
{
public partial class MultiTouchWindow1 : Window
{
ManipulationProcessor _processor = new ManipulationProcessor(ProcessorManipulations.ALL);

public MultiTouchWindow1()
{
InitializeComponent();

Loaded += (s, e) => { Factory.EnableStylusEvents(this); };

StylusDown += (s, e) => { _processor.ProcessDown((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

StylusUp += (s, e) => { _processor.ProcessUp((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

StylusMove += (s, e) => { _processor.ProcessMove((uint)e.StylusDevice.Id,
e.GetPosition(_canvas).ToDrawingPointF()); };

_processor.ManipulationDelta += ProcessManipulationDelta;
_processor.PivotRadius = 2;
}

private void ProcessManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
_translate.X += e.TranslationDelta.Width;
_translate.Y += e.TranslationDelta.Height;

_rotate.Angle += e.RotationDelta * 180 / Math.PI;

_scale.ScaleX *= e.ScaleDelta;
_scale.ScaleY *= e.ScaleDelta;
}
}
}

It’s also possible to verify if your hardware supports multi touch:

if (Windows7.Multitouch.TouchHandler.
DigitizerCapabilities.IsMultiTouchReady)
{
//MultiTouch is available
this.StartupUri = new Uri("MultiTouchWindow1.xaml", UriKind.Relative);
}
else this.StartupUri = new Uri("Window1.xaml", UriKind.Relative);

The complete code is available on CodePlex: http://simon.codeplex.com.

Enjoy Windows 7 Multi touch! And now… waiting for Silverlight 3 :)

The multi touch library is governed by this license.