WPF4 ベータ2 におけるタッチイベント

Artikel
02/01/2010

WPF 4 ベータ2のマルチタッチ対応の1つである、タッチイベントを取り上げます。ドキュメントを読むと、タッチイベントとして、以下のようなものがUIElement クラスに追加されています。

TouchDown：タッチされた場合に発生する。
TouchMove：タッチした指を移動した場合に発生する。
TouchUp：タッチした指を離す場合に発生する。

これ以外にも、PreviewTouchDown,Move,Upというイベントが定義されています。このイベントを使ったXAMLを以下のように定義します。

 <Window　x:Class="TouchEventSample.MainWindow"
　　　 xmlns="https://... /2006/xaml/presentation"
      xmlns:x="https://.../winfx/2006/xaml"
      Title="タッチイベント サンプル" 
      Width="500" Height="300">
    <Canvas x:Name="canvas" Background="LightYellow"
            TouchDown="Canvas_TouchDown"
            TouchMove="Canvas_TouchMove"
            TouchUp="Canvas_TouchUp" />
</Window>

Canvas 定義に、TouchDown、TouchMove、TouchUpイベントを定義しています。これらに対応するコードを以下のように記述します。

 public partial class MainWindow : Window
{
   // ブラシのリスト
   static List _brushes = new List<Brush>()
          { Brushes.Red, Brushes.Blue,Brushes.Green,
            Brushes.Purple, Brushes.Pink, Brushes.Orange };
   // 次に使用するブラシのインデックス
   static int _nextBrush = 0;

   // タッチした場所(TouchDevice)ごとの図形の辞書
   Dictionary<TouchDevice, Shape> _trails =
                     new Dictionary<TouchDevice, Shape>();

   public MainWindow()
   {  InitializeComponent();  }

   private void Canvas_TouchDown(
                object sender, TouchEventArgs e)
   {
      // 新しいシェイプの作成
      var shape = CreateShape();
      // Canvas上のタッチした場所を取得
      var origin = e.GetTouchPoint(canvas);
      // 図形をタッチした場所で表示するようにします
      shape.RenderTransform =
           new TranslateTransform(
             origin.Position.X - shape.RenderSize.Width / 2,
             origin.Position.Y - shape.RenderSize.Height / 2);

     // 作成した図形を辞書へ登録します(移動するためです)
     _trails[e.TouchDevice] = shape;
     // 図形をCanvasへ追加します
     canvas.Children.Add(shape);
     canvas.InvalidateVisual();
     // タッチデバイスをキャプチャします
     canvas.CaptureTouch(e.TouchDevice);
   }

   private void Canvas_TouchMove(
                object sender, TouchEventArgs e)
   {
      // タッチ移動がCanvas上で行われている場合
      if (e.TouchDevice.Captured == canvas)
      {
         // タッチした場所を記録した図形を辞書から取得します
         var shape = _trails[e.TouchDevice];
         // 現在位置を取得します
         var origin = e.GetTouchPoint(canvas);
         // 図形を新しい位置へ移動します
         shape.RenderTransform =
             new TranslateTransform(
              origin.Position.X - shape.RenderSize.Width / 2,
              origin.Position.Y - shape.RenderSize.Height / 2);
      }
   }

   private void Canvas_TouchUp(
                object sender, TouchEventArgs e)
   {
      // タッチデバイスを解放します
      canvas.ReleaseTouchCapture(e.TouchDevice);
      // 図形を削除します
      canvas.Children.Remove(_trails[e.TouchDevice]);
      _trails.Remove(e.TouchDevice);
   }

   /// <SUMMARY>
   /// 図形を作成するヘルパーメソッド
   /// </SUMMARY>
   /// <RETURNS>Shape(Ellipse)</RETURNS>
   private Shape CreateShape()
   {
      Ellipse ellipse = new Ellipse();
      ellipse.Width = 100;
      ellipse.Height = 100;
      ellipse.Fill = _brushes[_nextBrush];
      _nextBrush = (_nextBrush + 1) % _brushes.Count;
      return ellipse;
   }
}

このコードのポイントは、シェイプを作成してからRenderTransformを設定していることです。TouchMoveイベントで図形を移動させるために、TranslateTransformのインスタンスを使用しています。この出来上がったコードを使用して実行すると、以下のようになります。

タッチした場所に図形が描画されて、移動すると図形が動き、離すと図形が消去されます。このサンプルで学習できることは、タッチイベントの発生順序になります。つまり、「Down->Move->Up」となるわけです。もちろんMoveが存在しない場合もあります。描画する図形を線などに置き換えれば、簡単なお絵かきノートのようなものも実現することができます。

Freigeben über

WPF4 ベータ2 におけるタッチイベント

Zusätzliche Ressourcen