ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その43:Gridの使い方

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年12月2日 from Atelier:Mitsuba

はじめに

このエントリはExpression Blendアドベントカレンダー20121日目です。

ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。

(Surfaceのエントリも後でかくよぉ。。。)

まず1回目はGridを使ってみましょう。

パネル系は多解像度に対応するには必須の知識です。

Gridは開発者が自由に格子状に線を切って、コントロールを配置できるパネルです。

早速試してみて、Gridの特性を抑えておきましょう。

操作方法

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

f:id:c-mitsuba:20121202230231p:image

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

f:id:c-mitsuba:20121202230528p:image

4.Gridを切ったら、白四角に青字で書かれたマス目のサイズが表示されます。

このサイズ表記にマウスをあわせると、サイズを変更できるチップが表示されます。

*印は割合を示し、鍵アイコンは固定値を表します。

f:id:c-mitsuba:20121202230729p:image

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

f:id:c-mitsuba:20121202231345p:image

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

f:id:c-mitsuba:20121202231526p:image

7.次にコントロールを配置してみましょう。

Gridの子要素にコントロールを配置して、レイアウトパネルからRowとColumnを変更します。

なお、Gridのマス目に背景色を付けることは出来ないので、マスごとに色を変えたい場合は、Rectangleなり、Gridなりを置いて、Backgroundを変更します。

f:id:c-mitsuba:20121202231556p:image

8.実行してみましょう。

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

f:id:c-mitsuba:20121202231809p:image

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

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ