atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その43:Gridの使い方

このエントリはExpression Blendアドベントカレンダー20121日目です。
ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。
(Surfaceのエントリも後でかくよぉ。。。)

まず1回目はGridを使ってみましょう。
パネル系は多解像度に対応するには必須の知識です。

Gridは開発者が自由に格子状に線を切って、コントロールを配置できるパネルです。
早速試してみて、Gridの特性を抑えておきましょう。

1.Girdをアプリ全面におきます。
2.デザイナでマウスカーソルをGridのふちに近づけてください。
青い線がでて、そこでクリックするとGridを切れます。

3.何本でもばしばし切れます。

4.Gridを切ったら、白四角に青字で書かれたマス目のサイズが表示されます。
このサイズ表記にマウスをあわせると、サイズを変更できるチップが表示されます。
*印は割合を示し、鍵アイコンは固定値を表します。

5.例えばこのGridの場合、上から200px,200px,残りを1:2のサイズに、同様に左から200px,200px,残りを1:2のサイズに切ったGridになります。

6.なお、これらGridの切り方をパネルで変更する場合は、ColumnDefinitionとRowDefinitionから行います。

7.次にコントロールを配置してみましょう。
Gridの子要素にコントロールを配置して、レイアウトパネルからRowとColumnを変更します。
なお、Gridのマス目に背景色を付けることは出来ないので、マスごとに色を変えたい場合は、Rectangleなり、Gridなりを置いて、Backgroundを変更します。

8.実行してみましょう。
左端の縦列の高さが、200px,200px,残り1:2となり、上2つは固定、下2つは解像度によって変更されるGridになりました。

タイルっぽいものを表示したければ、Girdを数だけ切って、すべて比率を1にしてやれば良いでしょう。