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


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



  • TouchDown:タッチされた場合に発生する。

  • TouchMove:タッチした指を移動した場合に発生する。

  • TouchUp:タッチした指を離す場合に発生する。

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

<Window x:Class="TouchEventSample.MainWindow"
    xmlns="http://... /2006/xaml/presentation"
xmlns:x="http://.../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のインスタンスを使用しています。この出来上がったコードを使用して実行すると、以下のようになります。


TouchEvent


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

Comments (0)

Skip to main content