MultiTouch Behavior を利用して Silverlight でゼスチャー操作をしてみる

今回は Silverlight や WPF に対してゼスチャー操作を利用可能にする MultiTouch Behavior について紹介する。

MultiTouch Behavior のインストール

MultiTouch Behavior パッケージは NuGet で利用可能であり、パッケージマネージャコンソールで以下のコマンドを入力することで利用可能になる。

PM> Install-Package MultiTouchBehaviors

といいつつ、まだまだバージョンは 0.6.9 な辺りでどうなんだろうかと思ったり（汗。インストールして確認したところ、どうやら Silverlight 4 向けにビルドされたらしく Silverlight 5 では利用できなかった。。。。
仕方がないので CodePlex - Windows Phone, Silverlight and WPF Multi-Touch Manipulations から最新版のソースコードを取得し、Silverlight 5 向けにビルドしなおすことで MultiTouch Behavior を Silverlight 5 でも利用可能となった。

MultiTouch Behavior を利用したアプリケーソン

特にこだわりがなければ、まずは一旦 Silverlight 4 アプリケーションを新規に作成し、NuGet を利用して MultiTouch Behavior をインストールする。更に、 XAML を以下のように書き換えて Silverlight アプリケーションを起動する。

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:behaviors="clr-namespace:MultiTouch.Behaviors.Silverlight4;assembly=MultiTouch.Behaviors.Silverlight4"
    xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <Image Source="Images/P1000555.JPG" Width="675" Canvas.Left="61" Canvas.Top="43" Height="506">
                <interactivity:Interaction.Behaviors>
                    <behaviors:MultiTouchBehavior IsRotateEnabled="True" IsScaleEnabled="True" 
                                              MinimumScale="100" MaximumScale="500"  />
                </interactivity:Interaction.Behaviors>
            </Image>
        </Canvas>
    </Grid>
</UserControl>