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

今回も4章の描画オブジェクトをまとめます。

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

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

4.6　イメージ

イメージの表示/編集については以下のクラスあたりを使うと簡単に出来ます。

1. System.Windows.Controls.Imageクラス
  1. ImageSourceプロパティ
2. System.Windows.Media.Imaging.BitmapImageクラス

ここでの説明は省略。詳しくはMSDNのこのあたりとかこのあたりをご覧ください。

4.7 ブラシ

塗りつぶししたいときにはブラシを使います。ブラシとはSystem.Windows.Media.Brushクラスであり、その塗りつぶし方によって使用するクラスは異なりますが、使用するクラスはすべてSystem.Windows.Media.Brushクラスの派生クラスです。

塗りつぶしに関するクラスの一覧をまとめました。
# 名前空間はすべて「System.Windows.Media」です

クラス	塗りつぶし方法	MSDN
SolidColorBrush	単一固定色の塗りつぶし	＊
GradientBrush	塗りつぶしをグラデーションにするスーパークラス	＊
LinearGradientBrush	特定の方向に徐々に色を変化させる塗りつぶし	＊
RadialGradientBrush	楕円状に徐々に色を変化させる塗りつぶし	＊
TileBrush	特定パターンでの塗りつぶしをするスーパークラス	＊
ImageBrush	特定のイメージを用いて内部の領域を塗りつぶしする	＊

(1) SolidColorBrushクラスの使用方法

楕円を塗りつぶし、それらを重ね合わせたり色を変えたりするサンプルを作成しました。

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

class Test {
	[STAThread]
	public static void Main(){
	        byte el1Color = 0xFF;
        	byte el2Color = 0xFF;

	        Ellipse elp1 = new Ellipse();
	        elp1.Fill    = new SolidColorBrush(Color.FromArgb(0x80, el1Color, 0, 0   ));
	        elp1.Width   = 400;
        	elp1.Height  = 200;
	        Canvas.SetLeft(elp1, 10);
        	Canvas.SetTop(elp1, 10);

	        Ellipse elp2 = new Ellipse();
        	elp2.Fill    = new SolidColorBrush(Color.FromArgb(0x80, 0   , 0, el2Color));
	        elp2.Width   = 400;
        	elp2.Height  = 200;
	        Canvas.SetLeft(elp2, 200);
        	Canvas.SetTop(elp2, 10);

	        Button btnChange  = new Button();
        	btnChange.Content = "楕円の色を変えます";
	        Canvas.SetLeft(btnChange, 10);
        	Canvas.SetTop(btnChange, 230);

	        btnChange.Click += (sender, e) => {
        	    el1Color -= 0x20;
	            el2Color -= 0x30;

        	    if (el1Color < 0) el1Color += 0xFF;
	            if (el2Color < 0) el2Color += 0xFF;

        	    elp1.Fill = new SolidColorBrush(Color.FromArgb(0x80, el1Color, 0, 0   ));
	            elp2.Fill = new SolidColorBrush(Color.FromArgb(0x80, 0   , 0, el2Color));
		};

	       	Canvas canvas = new Canvas();
        	canvas.Children.Add(elp1);
	       	canvas.Children.Add(elp2);
        	canvas.Children.Add(btnChange);

		Window wnd  = new Window();
       		wnd.Content = canvas;
		Application app = new Application();
		app.Run(wnd);
	}
}

コンパイルして実行すると画面が表示されます。

楕円が2つ重なり合って表示されていて、その下にボタンが配置されています。
まず最初に注目すべきは楕円が重なり合っている部分です。重なっている部分の色は両者の色の重ね合わせとなっています。

続いてボタンを何度か繰り返し押してみます。

楕円の色が少しずつ暗くなり、最も黒に近づいた後に再度最初の色に戻ります。
また楕円の色の変化に伴って、重ね合わせの部分の色も変化するのがわかります。これが単色の塗りつぶしに使用されるSolidColorBurshクラスの使い方の例です。

(2) GradientBrushクラスの使用方法

次はグラデーションを使用した塗りつぶしの例です。
まずは単純なグラデーションの塗りつぶしをするサンプルを書いてみます。

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

class Test {
	[STAThread]
	public static void Main(){
	        Color  cl1 = Color.FromRgb(0xFF, 0x00 , 0x00);
        	Color  cl2 = Color.FromRgb(0x00, 0xFF , 0x00);
	        Color  cl3 = Color.FromRgb(0x00, 0x00 , 0xFF);

        	double redPos = 0.0;
	        double grnPos = 0.5;
        	double bluPos = 1.0;

	        LinearGradientBrush br1 = new LinearGradientBrush();
        	br1.GradientStops.Add(new GradientStop(cl1, redPos));
	        br1.GradientStops.Add(new GradientStop(cl2, grnPos));
        	br1.GradientStops.Add(new GradientStop(cl3, bluPos));

	        Button btnChange  = new Button();
	        btnChange.Content = "グラデーションの位置変更";
        	btnChange.Width   = 220;
	        btnChange.Click += (sender, e) => {
        		br1.GradientStops.Clear();
	        	redPos = redPos > 1.0 ? 0.0 : redPos + 0.05;
			grnPos = grnPos > 1.0 ? 0.0 : grnPos + 0.05;
			bluPos = bluPos > 1.0 ? 0.0 : bluPos + 0.05;
			br1.GradientStops.Add(new GradientStop(cl1, redPos));
			br1.GradientStops.Add(new GradientStop(cl2, grnPos));
			br1.GradientStops.Add(new GradientStop(cl3, bluPos));
		};

		Canvas cnvs = new Canvas();
		cnvs.Children.Add(btnChange);

		Window wnd = new Window();
		wnd.Content = cnvs;
		wnd.Background = br1;

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

コンパイルして実行するとグラデーションのかかった背景の画面とボタンが表示されます。

ボタンを押すたびにStopPointが全体的に右側にずれるのでグラデーションの様相が変わっていきます。

btnChangeのClickイベントハンドラでGradientStopを以前の値に+0.05するよう変更しているので、この変化する値の幅を変えてみると面白いので試してみてください。
以上でLinearGradientBrushクラスで直線的なグラデーションを描く説明は終わり。
次にRadialGradientBrushクラスを使って、楕円状のグラデーションを描くサンプルを作成します。

sing System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

class Test {
	[STAThread]
	public static void Main(){
	        Color  cl1 = Color.FromRgb(0xFF, 0x11 , 0x00);
        	Color  cl2 = Color.FromRgb(0x00, 0x11 , 0xFF);

	        double centerX = 0.3;
        	double centerY = 0.8;

	        RadialGradientBrush br1 = new RadialGradientBrush();
        	br1.Center = new Point(centerX, centerY);
	        br1.GradientStops.Add(new GradientStop(cl1, 0.0));
        	br1.GradientStops.Add(new GradientStop(cl2, 1.0));

	        Button btnChange  = new Button();
	        btnChange.Content = "グラデーションの位置変更";
        	btnChange.Width   = 220;
        	btnChange.Click += (sender, e) => {
	        	br1.GradientStops.Clear();
        	        centerX = centerX > 1.0 ? 0.0 : centerX + 0.1;
	                centerY = centerY > 1.0 ? 0.0 : centerY + 0.1;
                	br1.Center = new Point(centerX, centerY);
        	        br1.GradientStops.Add(new GradientStop(cl1, 0.0));
	                br1.GradientStops.Add(new GradientStop(cl2, 1.0));
		};

	        Canvas cnvs = new Canvas();
        	cnvs.Children.Add(btnChange);

		Window wnd = new Window();
	        wnd.Content = cnvs;
        	wnd.Background = br1;

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