WPFでプログラムしてみよう(3) - 子持ちししゃもといっしょ

私が勉強で使っているテキストはこちらです。

Windows Presentation Foundation　プログラミング入門

作者: 赤坂玲音
出版社/メーカー: 秀和システム
発売日: 2007/04/26
メディア: 単行本
購入: 2人クリック: 19回
この商品を含むブログ (18件) を見る

今回は4章の「描画オブジェクト」についてまとめます。

分類	私の環境
OS	Windows Vista SP1
Framework	.NET Framework3.5
editor	gvim 7.1

第4章描画オブジェクト

UIのあるプログラムを作っていると画面上に線を引いたり、図形を描いたりということをしたくなるはずです。
この章ではWPFで代表的な図形の描画/設定をする方法についてまとめます。

線を引く

線を引くのはLineクラスを使用します。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;


class Test {
	[STAThread]
	public static void Main(){
		Window wnd = new Window();

		// 線を引く //
		Line ln1 = new Line();
		ln1.Stroke = Brushes.Blue;
		ln1.X1 = 10;
		ln1.Y1 = 10;
		ln1.X2 = 410;
		ln1.Y2 = 210;

		Line ln2 = new Line();
		ln2.Stroke = Brushes.Red;
		ln2.X1 = 10;
		ln2.Y1 = 210;
		ln2.X2 = 410;
		ln2.Y2 = 10;

		Line ln3 = new Line();
		ln3.Stroke = Brushes.Green;
		ln3.X1 = 10;
		ln3.Y1 = 110;
		ln3.X2 = 410;
		ln3.Y2 = 110;

		// ボタンを追加 //
		Button btn1 = new Button();
		btn1.Content = "線を太くする";
		Canvas.SetLeft(btn1, 50);
		Canvas.SetTop(btn1, 90);
		btn1.Height = 50;
		btn1.Width  = 100;

		btn1.Click += (sender, e) => {
			ln1.StrokeThickness +=  5;
			ln2.StrokeThickness += 10;
			ln3.StrokeThickness += 15;
		};

		Button btn2 = new Button();
		btn2.Content = "線の端部を変更";
		Canvas.SetLeft(btn2, 180);
		Canvas.SetTop(btn2,180);
		btn2.Height = 50;
		btn2.Width  = 100;

		btn2.Click += (sender, e) => {
			PenLineCap plc = ln1.StrokeStartLineCap;
			switch ( plc ) {
				case PenLineCap.Square  :
					plc = PenLineCap.Flat;
					break;
				case PenLineCap.Flat    :
					plc = PenLineCap.Round;
					break;
				case PenLineCap.Round   :
					plc = PenLineCap.Triangle;
					break;
				case PenLineCap.Triangle:
					plc = PenLineCap.Square;
					break;
			}
			ln1.StrokeStartLineCap = plc;
			ln2.StrokeStartLineCap = plc;
			ln3.StrokeStartLineCap = plc;
			ln1.StrokeEndLineCap   = plc;
			ln2.StrokeEndLineCap   = plc;
			ln3.StrokeEndLineCap   = plc;
		};

		Button btn3 = new Button();
		btn3.Content = "線を点線に変更";
		Canvas.SetLeft(btn3, 50);
		Canvas.SetTop(btn3,180);
		btn3.Height = 50;
		btn3.Width  = 100;

		btn3.Click += (sender, e) => {
			DoubleCollection dbl = new DoubleCollection();
			dbl.Add(1);
			dbl.Add(0.5);
			dbl.Add(2);
			dbl.Add(0.5);

			ln1.StrokeDashArray = dbl;
			ln2.StrokeDashArray = dbl;
			ln3.StrokeDashArray = dbl;
		};

		Canvas cnvs = new Canvas();
		cnvs.Children.Add(ln1);
		cnvs.Children.Add(ln2);
		cnvs.Children.Add(ln3);
		cnvs.Children.Add(btn1);
		cnvs.Children.Add(btn2);
		cnvs.Children.Add(btn3);

		wnd.Content = cnvs;

		Application app = new Application();
		app.Run(wnd);
	}
}

これをコンパイルして実行してみます。
実行すると線が3本とボタンが3つの画面が表示されます。

「線を太くする」ボタンを押すたびに3本の線が少しずつ太くなっていきます。

次に「線の端部を変更」ボタンを押すと、押すたびに線の端の形が変わります。

↓

最後に「線を点線に変更」を押すと線が点線になります。

このようにLineクラスのプロパティを変更することでさまざまな線を描画することが出来ます。

長方形と円

単線ではなく閉じた図形を描くことも可能です。

まずは長方形を描画してみます。そのままだとつまらないので、角を丸くするためのボタンや色を変えるためのボタンも追加します。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

class Test {
	[STAThread]
	public static void Main(){
		Rectangle rect1 = new Rectangle();
		rect1.Fill   = Brushes.Red;
		rect1.Width  = 400;
		rect1.Height = 200;
		Canvas.SetTop(rect1, 10);
		Canvas.SetLeft(rect1, 10);

		// ボタンを追加 //
		Button btn1 = new Button();
		btn1.Content = "角を丸くします";
		Canvas.SetLeft(btn1, 70);
		Canvas.SetTop(btn1, 80);
		btn1.Height = 50;
		btn1.Width  = 120;

		btn1.Click += (sender, e) => {
			if ( (string)btn1.Content == "角を丸くします" ){
				btn1.Content  = "角を戻します";
				rect1.RadiusX = 30;
				rect1.RadiusY = 30;
			} else {
				btn1.Content  = "角を丸くします";
				rect1.RadiusX = 0;
				rect1.RadiusY = 0;
			}
		};

		// ボタンを追加 //
		Button btn2 = new Button();
		btn2.Content = "青で塗りつぶします";
		Canvas.SetLeft(btn2, 210);
		Canvas.SetTop(btn2, 80);
		btn2.Height = 50;
		btn2.Width  = 120;

		btn2.Click += (sender, e) => {
			if ( (string)btn2.Content == "青で塗りつぶします" ){
				rect1.Fill = Brushes.Blue;
				btn2.Content  = "赤で塗りつぶします";
			} else {
				btn2.Content  = "青で塗りつぶします";
				rect1.Fill = Brushes.Red;
			}
		};

		Canvas cnvs1 = new Canvas();

		// 矩形を追加
		cnvs1.Children.Add(rect1)  ;

		// ボタン1を追加
		cnvs1.Children.Add(btn1)   ;

		// ボタン2を追加
		cnvs1.Children.Add(btn2)   ;

		Window wnd  = new Window();
		wnd.Content = cnvs1       ;

		Application app = new Application();
		app.Run(wnd);
	}
}