今回は2つのサンプル「画像のドラッグ、移動、回転、拡大縮小を行う」と「文字がアニメーション表示される」を順番に紹介します。
画像のドラッグ、移動、回転、拡大縮小を行う
このサンプルでは、画面上に重なって表示されている画像を、タッチ操作で、ドラッグ、移動、回転、拡大縮小を行うサンプルです（図1）。画面上の画像をスタイラスペンや指で移動し、2本の指で回転、拡大縮小ができます。
図1：画像をドラッグ、移動、回転、拡大縮小している（クリックで拡大）
実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。
VIDEO
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_MultiTouch」という名前を付けています。
ソリューションエクスプローラー内にImagesというフォルダーを作って画像を配置しています。またプロジェクト内にリスト1のXML文書ファイル（photo_etc.xml）も配置しておきます。
ダウンロードされたサンプルファイルには、画像やXMLファイルは追加済みです。
リスト1 XML文書ファイル(photo_etc.xml)
今回は要素の内容は使用しておりません。
06 抜けるような青空に，銀杏の木が突き刺さっている。
コントロールの配置
ツールボックスからデザイン画面上にCanvasコントロールを1個だけ配置します（図2）。書き出されるXAMLコードは省略します。
図2：Canvasコントロールを配置した（クリックで拡大）
次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。
ロジックコードを記述する
リスト2 (MainWindow.xaml.vb)
2Public NotInheritable Class MainPage
ページがアクティブになった時の処理
XElement.LoadメソッドでXML文書ファイル（photo_etc.xml）を読み込みます。
読み込んだXMLのDescendantsメソッドで、すべての子孫要素に対して、要素を変数resultに格納しながら反復処理を行います。
新しいImageのインスタンスmyImageオブジェクトを作成します。WidthとHeightの値を指定し、Sourceプロパティに、画像を格納している”ms-appx:///Images”フォルダーと、要素の値を連結して指定します。
UIElementの描画位置に影響する変換情報を設定するRenderTransformプロパティに、1 つのオブジェクトに複数の異なる変換を適用することができるCompositeTransformを指定します。
ジェスチャとともにUIElementの動作および操作に使用されるManipulationModeに、すべての相互作用モードを有効にする、ManipulationModes.Allを指定します。ManipulationModes enumeration (Windows)
ShowAreaというCanvasに各プロパティの設定されたmyImageオブジェクトを追加します。これで、画像が表示されるようになりました。
AddHandlerステートメントで、操作中に入力デバイスが位置を変更した時に発生するManipulationDeltaイベントにイベントハンドラを追加します。イベントハンドラ内では以下の処理を行います。
TranslateXとTranslateYで、ｘ軸とｙ軸にそって並行移動する距離を設定します。
ScaleXとScaleYで、オブジェクトを拡大縮小する値を設定します。
Rotaionプロパティでオブジェクトを回転します。CenterXとCenterYには実際の画像サイズの半分のWidthとHeightの値を指定します。これで、画像の中心を起点として回転します。
SetValueメソッドでZIndexPropertyに1ずつ加算されるメンバ変数noの値を指定します。選択された画像が一番手前に配置されます。
01 Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
03 Dim xmldoc As XElement = XElement.Load("photo_etc.xml")
05 For Each result In From c In xmldoc.Descendants("情報") Select c
06 Dim myImage As New Image
11 .Source = New BitmapImage(New Uri("ms-appx:///Images/ " &result.Element("画像名").Value, UriKind.Absolute))
12 .RenderTransform = New CompositeTransform
13 .ManipulationMode = ManipulationModes.All
16 ShowArea.Children.Add(myImage)
18 AddHandlermyImage.ManipulationDelta, Sub(mySender As Object, myArgs As Input.ManipulationDeltaRoutedEventArgs)
19 Dim myTrans = DirectCast(myImage.RenderTransform, CompositeTransform)
20 myTrans.TranslateX = myTrans.TranslateX + myArgs.Delta.Translation.X
21 myTrans.TranslateY = myTrans.TranslateY + myArgs.Delta.Translation.Y
22 myTrans.ScaleX = myTrans.ScaleX * myArgs.Delta.Scale
23 myTrans.ScaleY = myTrans.ScaleY * myArgs.Delta.Scale
27 myTrans.Rotation = myTrans.Rotation + myArgs.Delta.Rotation
28 myImage.SetValue(Canvas.ZIndexProperty, no)
