DavideZordan.net

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.

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:

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.

The WPF Model-View-ViewModel Toolkit 0.1 is now available on the CodePlex project WPF Futures. It includes a Visual Studio template, a general introduction to M-V-VM and a complete WPF application demonstrating the pattern.

Click here to read the original post.

Read the complete articles here and here.

Direct link: http://www.identitymine.com/windows7/

YouTube videos:

Check out these great posts and videos by Dr Dave:

WPF Geospatial Data Visualisation – Part 1

Virtual Earth Geospatial Telemetry Visualisation – Part 1

In this excellent article, Rob Relyea describes the new features of XAML planned to ship in .NET 4.

In this post, Jason Zander reveals the new UI for Visual Studio, built on WPF:

Jaime Rodriguez has posted an awesome example using Windows Presentation Foundation, the M-V-VM pattern and the WPF toolkit.

Check out the original post to read the details and download the source code.

Click here to read the future plans for Delphi Prism, by Nick Hodges.

Matteo Baglini has posted an interesting example to implement the INotifyPropertyChanged interface and optimize the code for Visual Studio rename refactoring. Definitely worth a look!