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のコード
見た目
以下のような表示になります。
簡単な解説（？）
あくまでも超簡単にいきます。期待しないで下さい。
グラデーション
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#版、バインディング、本格的なガラスボタンの作成も試してみたいです。