画面の設計−その1

さてさて、.net Frameworkを使ったフォームアプリでは、IDE上で適当にボタン、ラベルを配置して画面を設計すればよかった。
これは以前のMFCを使った設計とあまり変わらない。
しかしModern UIではXAMLを使用して画面を設計する。
もちろんGUIデザインツールは存在する、Blendだ。
各画面(Page)に適当にボタンやTextBlockを配置するだけでよいのなら、Blendでポンポン置くだけでよい、あまり変わらない。
しかし、ListviewやGridViewを規則的に配置するのには、これではあまりうまくない。
XAMLを使って、Gridをがりがり書くことになる。
大雑把にいえば、エクセルの様に縦横のマス目を切るのだ。
Blank Pageベースのプロジェクトで、MainPage.xamlタグの間に、以下の様に追記する。
















2x2の行列様に、Aho 1、Aho 2、Aho 3、Aho 4が表示されるはずだ。
ColumDefinition、RowDefinitionで記述している"1*"はそのGridの分割比を指定する。
素数の絶対値で指定してもよい。
例えば、











とすれば
1列x1行 1列x2行
2列x1行 2列x2行
サイズの行列様になる。
また、各Gridをマージすることもできる。














これで1列目は1行になる。


また、Gridはネストが可能である。
つまりGridの中にGridを切ることもできる。





























これで(0, 0)のマスに、さらに2列x2行のマスを切ることができる。
最後にこれに枠をつけてみる、枠はで指定する。