Silverlight／WPFで使える逆引きTips集
――マルチタッチ機能

（20） WPFアプリケーションにおけるマルチタッチ操作

マニピュレーション

　「マニピュレーション」は画面上のオブジェクトを指で移動させたり、2本指で回転や拡大をすることを指します。マニピュレーション関連イベントには下記のものがあります。

イベント	説明
ManipulationStarting	操作開始
ManipulationDelta	操作中
ManipulationCompleted	操作完了

　特にManipulationDeltaイベントは重要で、回転（Rotation）、拡大/縮小（Scale）、Translation（平行移動距離）といった情報を取り扱います。

　この節では、Canvas上に配置された星型の図形を回転,拡大/縮小,平行移動させる方法を例に挙げ、マニピュレーションについて説明します。

　この例で使用するXAMLは下記の通りです。星型はExpression Blend SDKに含まれるRegularPolygonを使用しています。

XAMLの例

<Window x:Class="Window4"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    Title="04.図形を回転/拡大/縮小させる" Height="300" Width="300">
    <Canvas Name="canvas1">
        <ed:RegularPolygon Height="150" InnerRadius="0.56" 
                           Canvas.Left="60" Canvas.Top="60" 
                           Width="150" Fill="#FFDAE508"
                           PointCount="5" Stretch="Fill" 
                           IsManipulationEnabled="True"/>        
    </Canvas>
</Window>

上記XAMLで描かれたWindow

マニピュレーション操作

　まず、操作対象のオブジェクト（この例では星型）がマニピュレーションに対応できるオブジェクトであることを示すために、星（RegularPolygon）のIsManipulationEnabledプロパティにTrueを設定しておきます。

　次に、ManipulationStartingイベントでコンテナーを取得します。操作対象のオブジェクトの座標が、どのコントロールを基準とするかを設定するものです。

　この例では、星はcanvas1という名前が付けられたCanvasコントロール上に配置されているので 引数eのManipulationContainerプロパティにcanvas1を設定します。

VBの例

操作開始時の処理
Private Sub canvas1_ManipulationStarting(sender As System.Object, e As System.Windows.Input.ManipulationStartingEventArgs) Handles canvas1.ManipulationStarting
    '★★★操作対象オブジェクトがあるコンテナーを指定する★★★
    e.ManipulationContainer = canvas1

    e.Handled = True
End Sub

C#の例

// 操作開始時の処理
private void canvas1_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
    // ★★★操作対象オブジェクトがあるコンテナーを指定する★★★
    e.ManipulationContainer = canvas1;

    e.Handled = true;
}

　回転、拡大/縮小、平行移動処理はManipulationDeltaイベントで行います。実際の回転、拡大/縮小、平行移動処理は、操作対象オブジェクトおよび位置やサイズを管理するMatrixオブジェクトを使用します。

　今どのオブジェクトが操作対象であるかは、引数eのSourceプロパティで取得することができます。また位置やサイズは操作対象オブジェクトのRendarTransformプロパティのMatrixプロパティで取得することができます。

　次に、指の動きに合わせて図形を変形させます。回転させるにはRotateAtメソッドを、拡大/縮小させるにはScaleAtメソッドを、平行移動させるにはTranslateメソッドを使用します。

　RotateAtメソッド、ScaleAtメソッド、Translateメソッドの書式は下記の通りです。

• RotateAt(回転角度、回転中心X座標, 回転中心Y座標)
• ScaleAt(X軸のスケーリング量, Y軸のスケーリング量, スケーリング中心X座標, スケーリング中心Y座標) 　 
• Translate(X軸オフセット量, Y軸オフセット量)

　最後に操作対象オブジェクトに変換した図形を適用します。下記はManipulationDeltaイベントで回転,拡大/縮小,平行移動を行う例です。

VBの例

' 操作中の処理
Private Sub canvas1_ManipulationDelta(sender As System.Object, e As System.Windows.Input.ManipulationDeltaEventArgs) Handles canvas1.ManipulationDelta
    '操作対象のオブジェクトを取得
    Dim element = DirectCast(e.Source, UIElement)
    '位置やサイズを管理するMatrixオブジェクトを取得
    Dim matrix = (DirectCast(element.RenderTransform, MatrixTransform)).Matrix

    '回転させる
    matrix.RotateAt(e.DeltaManipulation.Rotation,
                     e.ManipulationOrigin.X, e.ManipulationOrigin.Y)

    '拡大縮小させる
    matrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X,
                         e.ManipulationOrigin.X, e.ManipulationOrigin.Y)

    '平行移動させる
    matrix.Translate(e.DeltaManipulation.Translation.X,
                          e.DeltaManipulation.Translation.Y)

    '操作対象のオブジェクトに変換したMatrixを適用する
    element.RenderTransform = New MatrixTransform(matrix)

    e.Handled = True
End Sub

C#の例

// 操作中の処理
private void canvas1_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    // 操作対象のオブジェクトを取得
    var element = (UIElement)e.Source;
    // 位置やサイズを管理するMatrixオブジェクトを取得
    var matrix = ((MatrixTransform)element.RenderTransform).Matrix;

    // 回転させる
    matrix.RotateAt(e.DeltaManipulation.Rotation,
        e.ManipulationOrigin.X, e.ManipulationOrigin.Y);

    // 拡大縮小させる
    matrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X,
        e.ManipulationOrigin.X, e.ManipulationOrigin.Y);

    // 平行移動させる
    matrix.Translate(e.DeltaManipulation.Translation.X,
        e.DeltaManipulation.Translation.Y);

    // 操作対象のオブジェクトに変換したMatrixを適用する
    element.RenderTransform = new MatrixTransform(matrix);

    e.Handled = true;
}

実行例は下記の通りです。

図形を移動/拡大/縮小/回転させる例

ポイント

　マニピュレーション操作はManipulationStarting, ManipulationDeltaイベントを使用する。

　回転はRotateAt, 拡大/縮小はScaleAt, 平行移動はTranslateメソッドを使用する。