WPFでプログラムしてみよう(5)

    1. WPFでプログラムしてみよう(1)-依存プロパティ等のWPF概要説明-
    2. WPFでプログラムしてみよう(2)-環境作成方法とパネルの使い方-
    3. WPFでプログラムしてみよう(3)描画オブジェクト(その1)-
    4. WPFでプログラムしてみよう(4)描画オブジェクト(その2)-


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


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

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

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);
	}
}


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



楕円上にグラデーションがかかった模様が表示されます。
続いてボタンを何度か繰り返し押してみます。





塗りつぶしの中心を変えているので楕円が少しずつ移動します。
ここではRadialGradientBrushクラスはCenterプロパティを変更していますが、これとは別に焦点を変更することも可能です。この場合はGradientOriginプロパティを使用します。

以上でRadialGradientBrushクラスでグラデーションを描く説明は終わり。


ブラシを使った塗りつぶしの説明はここまで。


なかなか4章が終わりませんが、長くなったのでここまで。
次はより複雑な図形を描くためのパス(4.8)から4章の最後までまとめます。