更新日: 2011 年 1 月 7 日

このコンテンツのポイント

  • Frame でのタッチ イベントの取得
  • タッチ対象となるオブジェクトの判別
  • ランダムに色を発生させる

今回紹介するコード

       Random rand = new Random();

       // Constructor
       public MainPage()
       {
           InitializeComponent();
           Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
       }

       void Touch_FrameReported(object sender, TouchFrameEventArgs e)
       {
           TouchPoint PrimaryTouchPoint = e.GetPrimaryTouchPoint(null);
           if (PrimaryTouchPoint != null)
               if (PrimaryTouchPoint.Action == TouchAction.Down)
               {
                   UIElement target = PrimaryTouchPoint.TouchDevice.DirectlyOver;
                   if (target.GetType() == typeof(TextBlock))
                       ((TextBlock)target).Foreground = new SolidColorBrush(
                           Color.FromArgb(255,
                           (byte)rand.Next(256),
                           (byte)rand.Next(256),
                           (byte)rand.Next(256))
                           );
               }
       }

目次

  1. はじめに
  2. プロジェクトの作成
  3. 画面の作成
  4. 機能を実装する
  5. 実行とテスト

1. はじめに

Silverlight では個々のオブジェクトごとに、タッチ イベントを取得しそれぞれ処理を実装することができますが、対象となるオブジェクトやコントロールが不特定だったり、また数が多い場合には実装が煩雑になりがちです。そこで、Silverlight の特徴でもある、イベントのバブリング (個々のオブジェクトで発生したイベントが、より上位のパネルやコントロールに渡されること) を利用して、アプリケーションの Frame 全体でタッチ イベントを取得し、イベント処理の中でタッチ対象に合わせて必要な処理を行います。

この手法は対象となるオブジェクトが不特定だったりまた多数いる場合には非常に効率的な実装方法となります。

ページのトップへ


2. プロジェクトの作成

まず新規にプロジェクトを作成します。Visual Studio のファイル メニューから新規作成 > プロジェクト… を選択します。

「新しいプロジェクト」ダイアログが表示されたら、左側のテンプレートからは Visual C# > Silverlight for Windows Phone を選択し、中央のアプリケーション タイプでは「Windows Phone Application」を選択します。最後に名前の欄に「PrimaryTouch」とプロジェクト名を入力したら「OK」を押してプロジェクトを作成します。(プロジェクト名は自由に変更してかまいません)

図 1. プロジェクトを新規に作成する

ページのトップへ


3. 画面の作成

初めにタイトルを選択し、Text プロパティを「PrimaryTouch」に変更しておきます。

図 2. アプリケーションタイトルの変更

続けて画面下の ContentPanel を選択し、ツールボックスから StackPanel コントロールをダブルクリックして追加します。

画面に配置されたら、Height プロパティの ◆ をクリックして「値のリセット」を選択します。同様に Margin、Width もリセットします。合わせて HolizontalAlignment、VerticalAlignment は Center を指定します。

続けて TextBlock を配置します。配置した StackPanel を選択したまま、ツールボックスから TextBlock コントロールをダブルクリックして追加します。画面に配置されたら、Height プロパティの ◆ をクリックして「値のリセット」を選択します。続けて FontSize を 56 とし、Text の文字列を「Windows Phone 7」に変更しておきましょう。

図 3. テキストブロックの配置

設定が終わったら TextBlock を選択したまま、編集 > コピーをしてさらに編集 > 貼り付けを何度か繰り返します。

図 4. テキストブロックの配置

ページのトップへ


4. 機能を実装する

MainPage.xaml.cs を選択してコードを表示します。

初めにランダムな値を発生させるための Random クラスのインスタンスを実装します。

      Random rand = new Random();

続けて MainPage のコンストラクター (MainPage 関数) 内でタッチ イベントが発生した際の FrameReported のコールバック関数を定義します。InitializeComponent() の後の行で Touch.FrameReported += と入力し、あとは Tab キーを 2 回押すだけでコードの入力とコールバック関数の定義が完了します。

       public MainPage()
       {
           InitializeComponent();
           Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);
       }
      void Touch_FrameReported(object sender, TouchFrameEventArgs e)
       {
           throw new NotImplementedException();
       }

作成された関数の中の throw で始まる行は削除し、タッチ イベントに対する処理を実装します。

       void Touch_FrameReported(object sender, TouchFrameEventArgs e)
       {
           TouchPoint PrimaryTouchPoint = e.GetPrimaryTouchPoint(null);
           if (PrimaryTouchPoint != null)
               if (PrimaryTouchPoint.Action == TouchAction.Down)
               {
                   UIElement target = PrimaryTouchPoint.TouchDevice.DirectlyOver;
                   if (target.GetType() == typeof(TextBlock))
                       ((TextBlock)target).Foreground = new SolidColorBrush(
                           Color.FromArgb(255,
                           (byte)rand.Next(256),
                           (byte)rand.Next(256),
                           (byte)rand.Next(256))
                           );
               }
       }

初めに TouchPoint 数からタッチ イベントが発生しているのか、そして発生したイベントが TouchDown かどうかチェックします。

           if (PrimaryTouchPoint != null)
               if (PrimaryTouchPoint.Action == TouchAction.Down)

チェックの結果、正しく TouchDown イベントが取れたら、続いてタッチ対象を判断します。TouchDevice.DirectlyOver から、タッチ対象となったオブジェクトを取得し、ここでは TextBlock かどうかを判別します。

                   UIElement target = PrimaryTouchPoint.TouchDevice.DirectlyOver;
                   if (target.GetType() == typeof(TextBlock))

タッチ対象となったオブジェクトが TextBlock であった場合は、対象となった TextBlock の文字色をランダムな色に変更しています。

ページのトップへ


5. 実行とテスト

コード入力が完了したら F5 を押して実行します。エミュレーターが自動的に起動して、コンパイルが完了したアプリケーションを転送し実行します。アプリケーションが起動したらテキストをタッチしてみましょう。

タッチするたびに、タッチされたテキストの色が変わります。実はタイトルも同じ TextBlock なのでタイトルの文字も色を変更することができます。

ここで使っている、Touch クラスの FrameReported はフレーム = アプリケーション全体のタッチ処理を取得しますが、例えば StackPanel で Touch イベントを取得すれば、StackPanel の配下にあるオブジェクトで発生したタッチ処理だけを対象にすることもできます。

処理の対象に合わせて、まとめて処理をすることで効率的な実装ができることを覚えておきましょう。


Code Recipe

ページのトップへ