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#版、バインディング、本格的なガラスボタンの作成も試してみたいです。