グラフィックの描画(3/5):初心者のためのWindows Phoneプログラミング入門

グラフィックの描画 (3/5)

作成:2011-10-24 07:59
更新:2011-10-24 07:59

■コードで図形を描くには？

タグを使った図形の描画は、非常に簡単ですが、しかしこれらは静的なものです。プログラム内からダイナミックに図形を描画するにはどうすれば良いのでしょうか。

今まで何らかのGUIプログラミングの経験がある人ならば、「何らかの形で画面に描画をするための仕組みがあって、それを呼び出して描くことができるに違いない」と思うでしょう。むろん、そうしたやり方もできないわけではないでしょうが、しかしWindows Phoneの場合には少し事情が異なります。

Windows Phoneでは、図形を描く場合もやはり「図形オブジェクトを生成して表示のプロパティを設定し、画面に組み込む」といったアプローチを取るのです。つまりは、XAMLファイルでタグを作成したのと同じことをコードで行うわけです。

下のリスト欄にいくつかの図形を作成し表示するサンプルを挙げておきました。ここでは、楕円と四角形を作成し表示させています。これらをコードから作成する流れをざっと整理しましょう。

1. オブジェクトの作成
まず、図形のオブジェクトを作成します。四角形はRectangle、楕円はEllipseというクラスとして用意されています。タグと同名ですからわかりやすいでしょう。引数もなく単純にnewするだけです。

var el1 = new Ellipse();
var el2 = new Rectangle();

2. プロパティの設定
作成したオブジェクトの表示に関するプロパティを設定していきます。縦横のサイズ、表示位置、そして表示する色など、さまざまなプロパティが図形クラスには用意されています。それらに値を設定し、図形の表示を整えます。

3. コンテナへの組み込み
最後にかならず行っておかなければならないのが「オブジェクトの組み込み」です。まだ、作成した図形インスタンスは、メモリ内にあるだけで、具体的にWindows Phoneの画面に組み込まれているわけではありません。そこで、画面に表示されているコンテナ（ここではContentPanel）に組み込んでやります。この文ですね。

ContentPanel.Children.Add(el1);

画面に配置されているGridクラスでは、自身の中に組み込まれているコントロール類を「Children」というプロパティで管理しています。このプロパティには「UIElementCollection」というコレクションクラスのインスタンスが設定されており、そこにコントロール類がまとめられています。このコレクションに「Add」メソッドで組み込んでやれば、Gridに図形が追加され表示される、というわけです。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
	public partial class MainPage : PhoneApplicationPage
	{
		// コンストラクター
		public MainPage()
		{
			InitializeComponent();
			draw();
		}

		public void draw()
		{
			var el1 = new Ellipse();
			el1.HorizontalAlignment = HorizontalAlignment.Left;
			el1.VerticalAlignment = VerticalAlignment.Top;
			el1.Width = 200;
			el1.Height = 200;
			el1.Fill = new SolidColorBrush(Colors.Blue);
			el1.Margin = new Thickness(50, 100, 10, 10);
			ContentPanel.Children.Add(el1);

			var el2 = new Rectangle();
			el2.HorizontalAlignment = HorizontalAlignment.Left;
			el2.VerticalAlignment = VerticalAlignment.Top;
			el2.Width = 200;
			el2.Height = 200;
			el2.Fill = new SolidColorBrush(Colors.Red);
			el2.Margin = new Thickness(150, 200, 10, 10);
			ContentPanel.Children.Add(el2);
		}
 
	}
}

※関連コンテンツ

<< prev next >>

「初心者のためのWindows Phoneプログラミング入門」に戻る