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.
).
