I’ve already blogged about adding multi-touch support to Silverlight applications using Blend behaviors (you can also read my italian language article).
This is a powerful and simple approach which is now available in WPF using Expression Blend 4 RC and the TranslateZoomRotateBehavior.
Let’s try to build a simple example:
1 – Open Expression Blend and create a new WPF project:
2 – Drag a Rectangle in the MainWindows.xaml:
3 – Let’s add multi-touch gestures and inertia effects to the rectangle selecting the Assets->Behavior tab and dragging the TranslateZoomRotateBehavior inside the rectangle:
4 – Let’s examine the Properties:
It’s possible to set the supported gestures (All, None, TranslateX, TranslateY, Rotate, Scale), the constrainToParentBounds modality, the Minimum, Maximum Scale and the Rotational and Translate Friction associated to the inertia.
Let’s select the constrainToParentBounds check box and run the project using the Project->Run Project menu:
Cool, Multi-touch and inertia effects are now enabled for the rectangle without writing a line of code!
And this is the generated xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/ 2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/ 2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/ 2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/ 2010/interactions"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
UseLayoutRounding="True"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Rectangle Margin="149,106,133,191" Stroke="Black">
<i:Interaction.Behaviors>
<ei:TranslateZoomRotateBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF8F98CA" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Window>
The source code of the project is available for download here.
