Windows タッチ&ジェスチャ研究室 Vol.04 ～Windows Phoneのタッチ#2～

2011年4月15日に、Windows Phone 7 アプリケーション開発 Deep Diveというセミナーを開催しました。
そのセミナーのタッチ&ジェスチャーのセッションをもとに説明します。
今回は、そのセッションをもとにした記事の第2回目です。
使用したスライドは、セミナーのWebサイトからダウンロードできます。

前回の記事 : Windows Phoneのタッチ#1

Windows Phoneでタッチやジェスチャに対応する場合、大きく4つの方法があります。
1つは前回説明したScrollViewerコントロールを使う方法です。
今回は難易度1のマウスイベントを使う方法と、難易度2のマニピュレーションを使う方法を紹介します。

マウスイベントを使う方法は、従来のWindows用のアプリケーションを作る時の方法と同じです。
タップした時になにかさせたいコントロールのマウスイベントを使うだけです。
Windows Phoneにはマウスはありませんが、Windows Phoneに搭載されているSilverlightにはマウス関係のイベントがあり、タップをマウス関連のイベントに変換してくれます。
例えば画面をタップした時に何かさせたいときは、MouseLeftButtonUpイベントに対応するイベントハンドラーを作成し、その中にプログラムを記述します。
ただ、この方法は2つの指を使うジェスチャーを検知できません。
2つの指を使うときは、マニピュレーション(Manipulation)を使います。

マニピュレーションには、2つのふるまいがあります。
1つは、1本指でさわっているときのふるまいです。もう1つは、2本指でさわっているときのふるまいです。
1本指と2本指で、取得できる情報に差があります。これについては後ほど説明します。

画面をさわったときにManipulationStartedというイベントが発生します。このイベントで、さわった位置を取得できます。
さわったまま指を動かすと、ManipulationDeltaというイベントが発生します。指の移動に伴い、画面の描画をおこなうときはこのイベントを使用します。
そして指を画面から離すと、ManipurationCompletedというイベントが発生します。

1本指でタッチしているときはパンとみなし、Transrationという情報を取得できます。
2本指でタッチしているときはピンチまたはストレッチとみなし、Scaleという情報を取得できます。
1本指でタッチしているときはScaleの情報はなく、2本指でタッチしているときにはTranslationの情報はありません。

以下のソースコードは、マニピュレーションのテスト用のプログラムです。
画面にテキストブロックを10個貼り付け、PhoneApplicationPageのManipulationStarted、ManipulatiponDelta、ManipulationCompletedイベントに対応したイベントハンドラーにそれぞれ以下のコードを追加します。

private void PhoneApplicationPage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
  textBlock1.Text = "StartX = " + e.ManipulationOrigin.X;
  textBlock2.Text = "SrartY = " + e.ManipulationOrigin.Y;
}

private void PhoneApplicationPage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
  textBlock3.Text = "ScaleX = " + e.DeltaManipulation.Scale.X.ToString();
  textBlock4.Text = "ScaleY = " + e.DeltaManipulation.Scale.Y.ToString();
  textBlock5.Text = "TransX = " + e.DeltaManipulation.Translation.X.ToString();
  textBlock6.Text = "TransY = " + e.DeltaManipulation.Translation.Y.ToString();
}

private void PhoneApplicationPage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
  textBlock7.Text = "TotalTransX = " + e.TotalManipulation.Translation.X;
  textBlock8.Text = "TotalTransY = " + e.TotalManipulation.Translation.Y;
  textBlock9.Text = "TotalScaleX = " + e.TotalManipulation.Scale.X;
  textBlock10.Text = "TotalScaleY = " + e.TotalManipulation.Scale.Y;
}

実行すると、TranslationやScaleにどのような値が入るかをテストできます。
なお、ManipulationはWindows PhoneのSilverlightにのみ搭載されている機能で、PC版のSilverlightでは使うことができません。

マイクロソフト
田中達彦