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

今回紹介するコード

C#
namespace Touch Memo 
{ 
    public partial class MainPage : PhoneApplicationPage 
    { 
        Point start = new Point(00); 
        Brush myBrush = new SolidColorBrush(Colors.White); 
        int thickness = 5; 
 
        // 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) 
                { 
                    start = e.GetTouchPoints(ContentPanel)[0].Position; 
                } 
                else if (primaryTouchPoint.Action == TouchAction.Move) 
                { 
                    Line myline = new Line(); 
                    myline.Stroke = myBrush; 
                    myline.StrokeThickness = thickness ; 
 
                    myline.X1 = start.X; 
                    myline.Y1 = start.Y; 
                    myline.X2 = e.GetTouchPoints(ContentPanel)[0].Position.X; 
                    myline.Y2 = e.GetTouchPoints(ContentPanel)[0].Position.Y; 
                    ContentPanel.Children.Add(myline); 
                    start = e.GetTouchPoints(ContentPanel)[0].Position; 
                } 
            } 
        } 
 
        private void button1_Click(object sender, RoutedEventArgs e) 
        { 
            ContentPanel.Children.Clear(); 
        } 
 
    } 
} 
 
 

目次

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

1. はじめに

ここでは、Touch イベントを取得する方法と、その入力に応じて処理を変える方法をアプリケーションに組み込みます。Touch のイベントは Touch クラスから取得します。

そして、コードの中でパネルに直接描画をします。描画はすべてベクトル ベースで行い、タッチを移動するたびに直線を引いていきます。直線は Line オブジェクトを生成し、画面上に追加していきます。

ページのトップへ


2. プロジェクトの作成

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

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

図 1

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

ページのトップへ


3. 画面の作成

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

図 2

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

続けて画面下の ContentPanel を少し短くして、ボタンを配置します。ボタンの名前を Clear に変更します。

図 3

ページのトップへ


4. 機能を実装する

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

はじめに MainPage のコンストラクター (MainPage 関数) の前に追加します。

C#
    public partial class MainPage : PhoneApplicationPage 
    { 
        Point start = new Point(00); 
        Brush myBrush = new SolidColorBrush(Colors.White); 
        int thickness = 5; 
 
        // Constructor 
        public MainPage() 
 

続けて MainPage のコンストラクター (MainPage 関数) 内で Touch イベントを定義します。

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

InitializeComponent(); の後の行で Touch.FrameReported += と入力し、あとは Tab キーを 2 回押すだけでコードの入力とコールバック関数の定義が完了します。

作成された関数の中の throw で始まる行は削除し、以下のコードを入力します。

C#
        void Touch_FrameReported(object sender, TouchFrameEventArgs e) 
        { 
            TouchPoint primaryTouchPoint = e.GetPrimaryTouchPoint(null); 
            if (primaryTouchPoint != null) 
            {     
                if (primaryTouchPoint.Action == TouchAction.Down) 
                { 
                    start = e.GetTouchPoints(ContentPanel)[0].Position; 
                } 
                else if (primaryTouchPoint.Action == TouchAction.Move) 
                { 
                    Line myline = new Line(); 
                    myline.Stroke = myBrush; 
                    myline.StrokeThickness = thickness ; 
 
                    myline.X1 = start.X; 
                    myline.Y1 = start.Y; 
                    myline.X2 = e.GetTouchPoints(ContentPanel)[0].Position.X; 
                    myline.Y2 = e.GetTouchPoints(ContentPanel)[0].Position.Y; 
                    ContentPanel.Children.Add(myline); 
                    start = e.GetTouchPoints(ContentPanel)[0].Position; 
                } 
            } 
        } 
 

最後に、一度画面 (MainPage.xaml) に戻り、配置したボタンをダブルクリックします。button1_Click のイベント ハンドラーが生成されたら以下の 1 行を追加します。これにより描画された内容をすべて消去することができます。

C#
        private void button1_Click(object sender, RoutedEventArgs e) 
        { 
            ContentPanel.Children.Clear(); 
        } 
 

 以上で、実装は完了です。

ページのトップへ


5. 実行とテスト

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

起動したらマウスで直接描画してみます。Clear ボタンを押すと描画内容を消去することができます。

図 4

このほか描画には Path オブジェクトなども使用することができます。


Code Recipe

ページのトップへ