SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight/WPFで使える逆引きTips集

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載ではSilverlightやWPFで使えるTipsを逆引き形式で紹介していきます。今回はWPFアプリケーションにおけるマルチタッチ操作のノウハウを解説します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

 Visual BasicまたはVisual C#、および、Silverlight/WPFのプロジェクト作成方法、XAMLについて基礎的な知識がある方を対象としています。

必要な環境

 下記を使ってプログラミングできる環境(筆者はこの環境で検証し執筆しています)。

  • Visual Studio 2010
  • Microsoft Silverlight 4 Tools for Visual Studio 2010

 Microsoft Silverlight 4 Tools for Visual Studio 2010は、Microsoftダウンロードセンターより入手できます。Visual Studio 2010が準備できない方は、Visual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0の組み合わせでも構いません。ただし、この場合は本連載で取り上げるTipsが動作しない可能性もあります。あらかじめご了承ください。

今回紹介するTips

  1. タッチされたときに四角形を描画する
  2. 指の動きを捕捉する
  3. TouchEnterイベントとTouchLeaveイベント
  4. マニピュレーション操作
  5. 慣性の動きを表現する

タッチイベントとマニピュレーションイベント

 マルチタッチに関連するイベント群は大きく2つに分けることができます。

 1つは直接的なイベントで、指が触れた、指が離れた、指がスクリーン上を移動したといった操作を認識するものです。

 もう1つはタッチジェスチャによるイベントで、拡大、回転、平行移動といった情報を得ることができるイベントです。

 この2つについて例を挙げながら使い方を紹介します。

マルチタッチ関連イベント

マルチタッチ関連イベントには下表に示すように5つのイベントがあります。

マルチタッチ関連イベント
イベント 説明
TouchDown 指がオブジェクトに触れたときに発生
TouchEnter 指がオブジェクトの外部から内部に移動したときに発生
TouchLeave 指がオブジェクトの内部から外部に移動したときに発生
TouceMove 指がオブジェクトに触れた状態で移動をすると発生
TouchUp 指がオブジェクトから離れたときに発生

 まずはXAMLを下記のように定義し、サンプルを実行する準備をしてください。

サンプルで使用するXAML
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Canvas Name="canvas1">
        
    </Canvas>
</Window>

タッチされたときに四角形を描画する

 まずはタッチ(TouchDownイベントが発生)したときに図形を描画してみましょう。

 プロパティウィンドウでイベントの一覧を表示し、TouchDownをダブルクリックしてイベントを作成します。コードは下記のようにします。

VBの例
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)
End Sub  
C#の例
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);
}

 オブジェクト(ここではCanvasコントロール)がタッチされた場合はTouchDownイベントが発生します。

 イベントの最初で、Rectangleクラスを使用して描画する四角形を準備します。四角形の色は乱数で決定し、Fillプロパティに設定します。

 次に描画する位置を決定します。TouchDownイベントの引数にはタッチイベントの入力をデータを提供するTouchEventArgsがあり、GetTouchPointというメソッドが備わっています。このGetTouchPointメソッドはタッチポイントや画面と指が接触してる部分のサイズ情報等を返します。メソッドの引数にはタッチ対象のオブジェクト(この例ではcanvas1)を指定します。

 取得した位置情報を利用して四角形の配置位置を設定したらCanvasコントロールに追加(描画)します。

 実行例は下図の通りです。タッチされた位置に透明度を50%にした四角形が描画されます。

タッチされた位置に四角形を描画する例
タッチされた位置に四角形を描画する例
ポイント

 タッチされたことを捕捉するにはTouchDownイベントを使用する。

 タッチ情報はGetTouchPointメソッドを使用する。

次のページ
指の動きを捕捉する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight/WPFで使える逆引きTips集連載記事一覧

もっと読む

この記事の著者

HIRO(ヒロ)

HIRO's.NETのHIROです。とある半導体工場のSEです。VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。最近はBlog でPowerShellについて書いています。2008/07/07にPowerShell from Japan!!というサイトを立ち上げまし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6091 2011/08/22 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング