Windows Phoneアプリケーション開発入門

第12回 Windows Phone 7で図形を描こう!

この記事を読むのに必要な時間:およそ 3 分

はじめに

前回は,Windows Phone 7プログラミングの第一歩ということで定番の「Hello World」を表示させました。今回からは,Windows Mobile 6.5で実践してきた内容をWindows Phone 7ではどのように実現させるのかを紹介していきたいと思います。

まずは.NET Compact Frameworkのソースコードと比較しつつ,Silverlightを使って線や矩形,円,多角形などの図形を描いてみましょう。Silverlightでもソースコードを使って書くこともできますが,ここではXAMLと呼ばれるXMLをベースにしたUI記述言語を使います。

Windows Mobile 6.5で図形を描いてみよう

今回は,.NET Compact Frameworkを使ったWindows Mobile 6.5での例を挙げてみます。

描画処理をフレームワークに任せるのではなく,自分の思った通りに描画するにはFormクラスのOnPaintメソッドをオーバーライドします。OnPaintメソッドは,基本的に画面描画が必要となった時に呼び出されます。

例えば,アプリケーションの起動時に画面を表示する場合,バックグラウンドで動かしていたアプリケーションを最前面に移動させた場合や,メッセージボックスを消して今まで見えていなかった部分が見える場合に呼び出されます。

図1 非表示箇所が表示される場合などに描画処理を行わないといけない

図1 非表示箇所が表示される場合などに描画処理を行わないといけない

Windows Mobileならではのケースとしては,ユーザーが画面を回転し解像度が変更される時などでしょうか。

OnPaintメソッドのオーバーライド

準備から始めましょう。スマートデバイス向けのプロジェクトを新規作成します。作成したFormのOnPaintメソッドをオーバーライドします。

図2 Form1のオーバーライド

図2 Form1のオーバーライド

テンプレートによって作成されたForm1クラス上で,インテリセンスを有効にしていた場合は「override」と打ち込むと候補の一覧が表示されると思います。その一覧の中からOnPaintを探して確定してください。以下のコードが挿入されます(そのまま下記のコードをコピー&ペーストして頂いても構いません)⁠

protected override void OnPaint(PaintEventArgs e)
{
  // base.OnPaint(e);
  
  // ここに描画処理を書く
}

OnPaintメソッドの引数PaintEventArgsのGraphicsプロパティを使うと,図形を描画するコードを書けます。このGraphicsオブジェクトはGDI+描画サーティファイをカプセル化したもので,様々な図形をディスプレイに描画するメソッドが用意されています。

.NET Compact Frameworkでは,Ellipse,Line,Image,Polygon,Rectangle,String,Fill Ellipse,Fill Polygon,Fill Rectangleの主要な描画プリミティブがサポートされています。代表的なものをコードと合わせてスクリーンショットを貼っておきます。

protected override void OnPaint(PaintEventArgs e)
{
  // 
  e.Graphics.Clear(Color.Black);
  
  // 斜めの線を引く
  Pen pen = new Pen(Color.White, 5f);
  e.Graphics.DrawLine(pen, 40, 40, 350, 200);
  
  // 塗り潰して三角形を描く
  Brush brush = new SolidBrush(Color.White);
  Point[] points = new Point[]{ new Point(210, 210), 
                                new Point(60, 510), 
                                new Point(360, 510) };
  e.Graphics.FillPolygon(brush, points);
  
  // 塗りつぶして矩形を描く
  Rectangle rect = new Rectangle(500, 30, 88, 250);
  e.Graphics.FillRectangle(brush, rect);
  
  // 円を描く
  e.Graphics.DrawEllipse(pen, 505, 250, 200, 200);
}

図3 Windows Mobile 6.5での代表的な描画プリミティブ

図3 Windows Mobile 6.5での代表的な描画プリミティブ

線の描画を行う

まずは線を引いてみましょう。線を引くには,DrawLineメソッドを使用します。線の描画開始座標x1・y1と終了座標x2・y2を指定,2点の座標間を画面に表示します。

Penクラスのコンストラクタ引数にてペンの太さを指定することができます。またPenオブジェクトのDashStyleプロパティを使うと,ドットの線(破線)を描画することができます。

protected override void OnPaint(PaintEventArgs e)
{
  // 直線を引く
  Pen pen1 = new Pen(Color.Black);
  e.Graphics.DrawLine(pen1, 20, 40, 400, 40);
  
  // 斜めに直線を引く
  Pen pen3 = new Pen(Color.Green);
  e.Graphics.DrawLine(pen3, 80, 80, 400, 200);
  
  // 太い直線を引く
  Pen pen2 = new Pen(Color.OrangeRed, 5f);
  e.Graphics.DrawLine(pen2, 100, 300, 440, 300);
  
  // ドットの線を引く
  Pen pen4 = new Pen(Color.DeepPink);
  pen4.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
  e.Graphics.DrawLine(pen4, 60, 400, 400, 400);
}

図4 線の描画

図4 線の描画

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入