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

はじめに

前回は、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メソッドは、基本的に画面描画が必要となった時に呼び出されます。

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

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

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

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

テンプレートによって作成された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);
}

線の描画を行う

まずは線を引いてみましょう。線を引くには、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);
}

矩形の描画を行う

矩形を描画するには、DrawRectangleメソッドを使用します。塗り潰した矩形を表示する場合には、FillRectangleメソッドを使用します。

Silverlightでは比較的簡単に実現可能な、枠つきの矩形の描画も.NET Compact Frameworkでは2ステップの段階を踏まないと実現できません。

protected override void OnPaint(PaintEventArgs e)
{
  // 矩形を描く
  Pen pen = new Pen(Color.DeepPink);
  Rectangle rect1 = new Rectangle(220, 30, 150, 150);
  e.Graphics.DrawRectangle(pen, rect1);
  
  // 塗りつぶされた矩形を描く
  SolidBrush brush = new SolidBrush(Color.Purple);
  Rectangle rect2 = new Rectangle(50, 200, 150, 150);
  e.Graphics.FillRectangle(brush, rect2);
  
  // 塗りつぶして枠線を引く
  Pen pen2 = new Pen(Color.Black, 5f);
  SolidBrush brush2 = new SolidBrush(Color.Yellow);
  Rectangle rect3 = new Rectangle(250, 360, 150, 150);
  // 差に塗りつぶした矩形を描く
  e.Graphics.FillRectangle(brush2, rect3);
  // その矩形の上に枠線を引く
  e.Graphics.DrawRectangle(pen2, rect3);
}

円の描画を行う

円を描画するには、DrawEllipseメソッドを使用します。RectangleのWidthプロパティに表示する円の縦方向の直径、Heightプロパティに表示する円の横方向の直径を指定します。塗りつぶした円を描画するには、

protected override void OnPaint(PaintEventArgs e)
{
  // 円を描く
  Pen pen = new Pen(Color.DeepPink);
  Rectangle rect1 = new Rectangle(220, 30, 150, 150);
  e.Graphics.DrawEllipse(pen, rect1);
  
  // 塗りつぶして円を描く
  SolidBrush brush = new SolidBrush(Color.Purple);
  Rectangle rect2 = new Rectangle(50, 200, 150, 150);
  e.Graphics.FillEllipse(brush, rect2);
}

多角形の描画を行う

多角形を描画するには、DrawPolygonメソッドを使用します。塗り潰す色を指定したブラシと各頂点の座標を引数に渡すと多角形を表示します。塗り潰した多角形を描画するには、FillPolygonメソッドの代わりにFillPolygonメソッドを使用します。

protected override void OnPaint(PaintEventArgs e)
{
  // 背景を黒色で初期化します
  e.Graphics.Clear(Color.Black);
  
  Brush brush = new SolidBrush(Color.White);
  Point[] points = new Point[]{ new Point(190, 40), 
                                new Point(40, 340), 
                                new Point(340, 340) };
  e.Graphics.FillPolygon(brush, points);
}

さいごに

Windows Mobile 6.5の.NET Compact Frameworkで図形を描画する方法を紹介しました。次回は、同じことをSilverlightを使って実現する方法をご紹介したいと思います。

今回は以上で終わりです。ありがとうございました。