マニピュレーション
「マニピュレーション」は画面上のオブジェクトを指で移動させたり、2本指で回転や拡大をすることを指します。マニピュレーション関連イベントには下記のものがあります。
| イベント | 説明 |
| ManipulationStarting | 操作開始 |
| ManipulationDelta | 操作中 |
| ManipulationCompleted | 操作完了 |
特にManipulationDeltaイベントは重要で、回転（Rotation）、拡大/縮小（Scale）、Translation（平行移動距離）といった情報を取り扱います。
この節では、Canvas上に配置された星型の図形を回転,拡大/縮小,平行移動させる方法を例に挙げ、マニピュレーションについて説明します。
この例で使用するXAMLは下記の通りです。星型はExpression Blend SDKに含まれるRegularPolygonを使用しています。
<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>
マニピュレーション操作
まず、操作対象のオブジェクト（この例では星型）がマニピュレーションに対応できるオブジェクトであることを示すために、星（RegularPolygon）のIsManipulationEnabledプロパティにTrueを設定しておきます。
次に、ManipulationStartingイベントでコンテナーを取得します。操作対象のオブジェクトの座標が、どのコントロールを基準とするかを設定するものです。
この例では、星はcanvas1という名前が付けられたCanvasコントロール上に配置されているので 引数eのManipulationContainerプロパティにcanvas1を設定します。
操作開始時の処理
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
// 操作開始時の処理
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イベントで回転,拡大/縮小,平行移動を行う例です。
' 操作中の処理
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
// 操作中の処理
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メソッドを使用する。
