図形を描画する（2）

| 2012年3月29日 | WindowsPhone7 | No Comments
Bookmark this on Hatena Bookmark

前の記事「図形を描画する（１）」にて四角形と円の描画についてご紹介しました。
今回は四角形、円以外に標準で用意されている図形の線、多角形の描画方法についてご紹介します。

今回は線を描画するLineと多角形を描画するPolygonを使用方法を紹介します。

ここで紹介する図形描画は静的な図形描画ではなく(XAMLで部品を置く)ではなく動的な図形描画(プログラム側で生成と表示)する方法をご紹介します。

詳しい内容は続きを御覧ください。

線を描画する

まず線を描画するにはLineクラスを生成し線を描画する始点、終点、色、線の太さの設定を行います。
Lineの主に設定するプロパティは以下の表の通りになります。
[table “224” not found /]

例えば線の始点を(100,100)とし終点を(200,200)を結ぶ線分で、色を黄色、線の太さを5ptと設定した図形を描画する場合は下記のようになります。

1
2
3
4
5
6
7
8
9
Line li = new Line();
li.HorizontalAlignment = HorizontalAlignment.Left;
li.VerticalAlignment = VerticalAlignment.Top;
li.Stroke = new SolidColorBrush(Colors.Yellow);
li.X1 = 100;
li.Y1 = 100;
li.X2 = 200;
li.Y2 = 200;
li.StrokeThickness = 5;

そして描画を行うにはレイアウトの部品を親として生成したLineクラスを子供として追加します。
例えばXAMLファイルに下記のように書かれていた場合にはContentPanelに生成したLineクラスを追加します。
この場合ContentPanelを親、Lineクラスを子として扱うことになります。

1
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

追加する方法は下記のようにして行います。

1
ContentPanel.Children.Add(li);

多角形を描画する

まず多角形を描画するにはPolygonクラスを生成し色、枠線の色、横の長さ、縦の長さ、形を設定を行います。
Polygonの主に設定するプロパティは以下の表の通りになります。
[table “225” not found /]

例えば三角形の横の長さを100px、縦の長さを100px、色を青色、枠線の色を紫、枠線の太さを2ptの図形を描画する場合は下記のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0, 0));
myPointCollection.Add(new Point(0, 1));
myPointCollection.Add(new Point(1, 1));
 
Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = new SolidColorBrush(Colors.Blue);
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = new SolidColorBrush(Colors.Purple);
myPolygon.StrokeThickness = 2;

そして描画を行うにはレイアウトの部品を親として生成したPolygonクラスを子供として追加します。
例えばXAMLファイルに下記のように書かれていた場合にはContentPanelに生成したPolygonクラスを追加します。
この場合ContentPanelを親、Polygonクラスを子として扱うことになります。

1
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

追加する方法は下記のようにして行います

1
ContentPanel.Children.Add(myPolygon);

サンプルとして線と、多角形を描画するサンプルを用意しました。
■MainPage.xaml

1
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

■MainPage.xaml.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public void draw()
{
    Line li = new Line();
    li.HorizontalAlignment = HorizontalAlignment.Left;
    li.VerticalAlignment = VerticalAlignment.Top;
    li.Stroke = new SolidColorBrush(Colors.Yellow);
    li.X1 = 100;
    li.Y1 = 100;
    li.X2 = 200;
    li.Y2 = 200;
    li.StrokeThickness = 5;
    ContentPanel.Children.Add(li);
 
    PointCollection myPointCollection = new PointCollection();
    myPointCollection.Add(new Point(0, 0));
    myPointCollection.Add(new Point(0, 1));
    myPointCollection.Add(new Point(1, 1));
 
    Polygon myPolygon = new Polygon();
    myPolygon.Points = myPointCollection;
    myPolygon.Fill = new SolidColorBrush(Colors.Blue);
    myPolygon.Width = 100;
    myPolygon.Height = 100;
    myPolygon.Stretch = Stretch.Fill;
    myPolygon.Stroke = new SolidColorBrush(Colors.Purple);
    myPolygon.StrokeThickness = 2;
    ContentPanel.Children.Add(myPolygon);
}

このサンプルコードを動かした時の画面は下図のようになります。

About The Author

muchiki