XAMLで窓を描いてみた

XAMLの練習がてら、窓辺の家紋(大嘘)こと窓を描いてみました。

窓と言っても四角を4つ並べただけですが…。

XAMLとは?

.NET Framework 3.0から導入されたGUIライブラリ、WPF (Windows Presentation Foundation) のためのマークアップ言語です。そのため、WPFとセットで言及されることが多いです。

WPFは、Windowsフォームよりもグラデーションやレイアウトなどで強力な表現が可能です。ただ、Windowsフォームと勝手が違うので少し戸惑うかもしれません。HTMLやCSSに慣れていたらXAMLの習得はしやすいです。

詳しくは以下の記事をご覧下さい。マイクロソフト公式の解説は分かりにくい…。

実のところ、私はWindowsフォームで十分だと思っていました。しかし、少しWPFを触ってみたら「こんなこともできるのか!」って驚きました。もっとWPFやXAMLを知りたいって思うようになりました。現状ではWPFに関して解説したサイトや書籍が少ないのは残念です…。

XAMLのコード


	
		
			
				
				
			
			
		
		
			
			
		
		
			
			
		
		
			
				
			
		
		
			
				
			
		
		
			
				
			
		
		
			
				
			
		
	

見た目

以下のような表示になります。

WinDraw

簡単な解説(?)

あくまでも超簡単にいきます。期待しないで下さい。

グラデーション

GradientStopCollectionでグラデーションの色の並びを指定しています。

色名はRedやBlueといった色名で指定することもできますが、ここでは16進数で指定します。CSSで使われる16進数形式の色指定との違いは、RGBの前にアルファ(不透明度)値がつくことです。00なら不透明度0%(完全な透明)、FFなら不透明度100%となります。

色名については以下を参照。


	
	

グラデーションの方向はそれぞれの正方形によって違うので個別に指定。4つの正方形は、LinearGradientBrush(線形グラデーションのブラシ)で塗り潰しています。グラデーションの始点をStartPointプロパティ、終点をEndPointプロパティをそれぞれ(X軸の点,Y軸の点)という形式で指定します。左上隅が(0,0)、右下隅が(1,1)となります。初期設定はStartPoint=”0,0″ EndPoint=”1,1″で、左上から右下のグラデーションとなっています。


	
		
	

グラデーションの詳細は以下。

スタイル

Grid(グリッド)要素内のStyle(スタイル)要素のTargetTypeプロパティをRectangle(四角形)としています。Setter要素のPropertyプロパティをMarginとし、Valueプロパティを10と設定しました。これで、グリッド内にある正方形のMargin(余白)が(特に指定しない限り)10ピクセルになります。

CSSで言えば、以下に相当します。

div {
	margin: 10px;
}

リソース

グラデーションの色の並びと、グリッド内の正方形のスタイルは、グリッドのリソースとして指定しています。


	
		
		
	
	

リソースを使用するメリットは、

  • 作成するインスタンスが少なくなる(その分アプリの起動時間が早くなる)
  • 保守性が向上する(例えば、色を変えたくなったとき、リソースを使用している場合は一か所だけ書き換えればよい)

グリッド

Gridは表形式のレイアウトを行うことができます。ここでは2列×2行を定義しています。


	
		
		
	
	
		
		
	

それぞれの要素に、行はGrid.Columnプロパティ、列はGrid.Rowプロパティで指定します。ただし、行番号、列番号は0から始まることにご注意下さい。

今後の目標

今後はC#版、バインディング、本格的なガラスボタンの作成も試してみたいです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする