Silverlight／WPFで使える逆引きTips集
――マルチタッチ機能

（20） WPFアプリケーションにおけるマルチタッチ操作

指の動きを捕捉する

　次に、Canvasコントロールで指の動きを捕捉する例を紹介します。　

　この例では、Canvasがタッチされたときに図形を描画し、指の移動似合わせて図形を移動し、指が離れたときに図形を消去します。実行例およびコードは下記の通りです。

指の動きを捕捉する例

XAMLの例

<Canvas Background="AliceBlue" Name="canvas1" 
        TouchDown="canvas1_TouchDown" 
        TouchMove="canvas1_TouchMove" 
        TouchUp="canvas1_TouchUp" />

VBの例

'描画した四角形を記憶しておくための変数
Private _CaputuredRect As New Dictionary(Of TouchDevice, Rectangle)

' タッチされたときの処理
Private Sub Canvas1_TouchDown(sender As System.Object, e As System.Windows.Input.TouchEventArgs) Handles Canvas1.TouchDown
    '四角形用変数
    Dim rect As New Rectangle()
    '四角形の幅と高さを設定
    rect.Width = 50
    rect.Height = 50

    '乱数を使用して色を作成
    Dim r = New Random()
    Dim alpha As Byte = CByte(128)
    Dim red As Byte = CByte(r.Next(0, 256))
    Dim green As Byte = CByte(r.Next(0, 256))
    Dim blue As Byte = CByte(r.Next(0, 256))

    '作成した色で四角形を塗りつぶす
    rect.Fill = New SolidColorBrush(Color.FromArgb(alpha, red, green, blue))

    'タッチされた位置を取得
    Dim tp = e.GetTouchPoint(Canvas1)
    '四角形を描画する位置をタッチされた位置にする
    rect.RenderTransform = New TranslateTransform(tp.Position.X - rect.Width / 2, tp.Position.Y - rect.Height / 2)

    '作成した四角形をcanvas1に追加（表示）する
    Canvas1.Children.Add(rect)
    Canvas1.InvalidateVisual()

    'ディクショナリに四角形を保存
    _CaputuredRect(e.TouchDevice) = rect
    'タッチをキャプチャする
    Canvas1.CaptureTouch(e.TouchDevice)
End Sub

' タッチが移動したときの処理
Private Sub Canvas1_TouchMove(sender As System.Object, e As System.Windows.Input.TouchEventArgs) Handles Canvas1.TouchMove
    If e.TouchDevice.Captured Is Canvas1 Then
        '現在捕捉されている図形を取得
        Dim rect = _CaputuredRect(e.TouchDevice)
        '★★★タッチされた位置を取得★★★
        Dim tp = e.GetTouchPoint(Canvas1)
        '四角形を描画する位置をタッチされた位置にする
        rect.RenderTransform = New TranslateTransform(tp.Position.X - rect.Width / 2, tp.Position.Y - rect.Height / 2)
    End If
End Sub

' タッチが離れたときの処理
Private Sub Canvas1_TouchUp(sender As System.Object, e As System.Windows.Input.TouchEventArgs) Handles Canvas1.TouchUp
    'タッチデバイスの削除
    Canvas1.ReleaseTouchCapture(e.TouchDevice)
    'Canvasから四角形を削除
    Canvas1.Children.Remove(_CaputuredRect(e.TouchDevice))
    '保存しておいた四角形を削除
    _CaputuredRect.Remove(e.TouchDevice)
End Sub

C#の例

// 描画した四角形を記憶しておくための変数
private Dictionary _CaputuredRect = new Dictionary();

// タッチされたときの処理
private void canvas1_TouchDown(object sender, TouchEventArgs e)
{
    // 四角形用変数
    Rectangle rect = new Rectangle();
    // 四角形の幅と高さを設定
    rect.Width = 50;
    rect.Height = 50;

    // 乱数を使用して色を作成
    Random r = new Random();
    byte alpha = (byte)128;
    byte red = (byte)r.Next(0, 256);
    byte green = (byte)r.Next(0, 256);
    byte blue = (byte)r.Next(0, 256);

    // 作成した色で四角形を塗りつぶす
    rect.Fill = new SolidColorBrush(Color.FromArgb(alpha, red, green, blue));

    // ★★★タッチされた位置を取得★★★
    var tp = e.GetTouchPoint(canvas1);
    // 四角形を描画する位置をタッチされた位置にする
    rect.RenderTransform = new TranslateTransform(tp.Position.X - rect.Width / 2, tp.Position.Y - rect.Height / 2);

    // 作成した四角形をcanvas1に追加（表示）する
    canvas1.Children.Add(rect);
    canvas1.InvalidateVisual();

    // ディクショナリに四角形を保存
    _CaputuredRect[e.TouchDevice] = rect;
    // タッチをキャプチャする
    canvas1.CaptureTouch(e.TouchDevice);
}

// タッチが移動したときの処理
private void canvas1_TouchMove(object sender, TouchEventArgs e)
{
    if (e.TouchDevice.Captured == canvas1)
    {
        // 現在捕捉されている図形を取得
        var rect = _CaputuredRect[e.TouchDevice];
        // タッチされた位置を取得
        var tp = e.GetTouchPoint(canvas1);
        // 四角形を描画する位置をタッチされた位置にする
        rect.RenderTransform = new TranslateTransform(tp.Position.X - rect.Width / 2, tp.Position.Y - rect.Height / 2);
    }
}

// タッチが離れたときの処理
private void canvas1_TouchUp(object sender, TouchEventArgs e)
{
    // タッチデバイスの削除
    canvas1.ReleaseTouchCapture(e.TouchDevice);
    // Canvasから四角形を削除
    canvas1.Children.Remove(_CaputuredRect[e.TouchDevice]);
    // 保存しておいた四角形を削除
    _CaputuredRect.Remove(e.TouchDevice);
}

　先ほども述べた通り、タッチされたことを知るにはTouchDownイベントを使用します。TouchDownイベントでは、先ほどの例で示したコードに加え、描画された四角形をディクショナリに登録するようにします。

　次に、タッチした指が動いていることを捕捉するにはTouchMoveイベントを使用します。TouchMoveイベントではCanvas上でデバイスが捕捉されているかどうかを確認し、捕捉されている場合にはディクショナリからタッチデバイスに関連付いている四角形を取得し位置情報を更新します。

　最後に指が離れたことを知るにはTouchUpイベントを使用します。TouchUpイベントではCanvasからタッチキャプチャを解放してクリーンアップを行います。

ポイント

　指の動きを捕捉するにはTouchDown, TouchMove, TouchUpイベントを使用する。

TouchEnterイベントとTouchLeaveイベント

　冒頭でも紹介したように、指がオブジェクトの外部から内部に移動した場合にはTouchEnterイベントが、指がオブジェクトの内部から外部に移動した場合にはTouchLeaveイベントが発生します。

　下記はCanvasコントロールの中央に四角形を配置し、タッチが四角形の外側から内側に入ってきたとき（TouchEnterイベント）に赤で塗りつぶし、タッチが四角形の外がに出たとき（TouchLeaveイベント）にオレンジで塗りつぶす例です。

TouchEnterイベントとTouchLeaveイベントを使用する例

XAMLの例

<Canvas Background="AliceBlue">
<Rectangle Canvas.Left="85" Canvas.Top="80" Fill="Blue" 
           Height="100" Name="rectangle1" Width="100" 
           TouchEnter="rectangle1_TouchEnter" 
           TouchLeave="rectangle1_TouchLeave" />
</Canvas>

VBの例

' タッチが四角形の外側から内側へ移動したときの処理
Private Sub rectangle1_TouchEnter(sender As System.Object, e As System.Windows.Input.TouchEventArgs) Handles rectangle1.TouchEnter
    '赤で塗りつぶす
    rectangle1.Fill = New SolidColorBrush(Colors.Red)
End Sub

' タッチが四角形の内側から外側へ移動したときの処理
Private Sub rectangle1_TouchLeave(sender As System.Object, e As System.Windows.Input.TouchEventArgs) Handles rectangle1.TouchLeave
    'オレンジで塗りつぶす
    rectangle1.Fill = New SolidColorBrush(Colors.Orange)
End Sub

C#の例

// タッチが四角形の外側から内側へ移動したときの処理
private void rectangle1_TouchEnter(object sender, TouchEventArgs e)
{
    // 赤で塗りつぶす
    rectangle1.Fill = new SolidColorBrush(Colors.Red);
}

// タッチが四角形の内側から外側へ移動したときの処理
private void rectangle1_TouchLeave(object sender, TouchEventArgs e)
{
    // オレンジで塗りつぶす
    rectangle1.Fill = new SolidColorBrush(Colors.Orange);
}