グリッド レイアウト パネルの使用
[Grid] レイアウト パネルは、特定のレイアウト機能への対応を目的とする他のレイアウト コンテナーに比べ、非常に柔軟性の高いレイアウト コンテナーです。Microsoft Expression Blend の [Grid] レイアウト パネルは、次の 2 種類のレイアウト編集モードで使用できます。
グリッド レイアウト モード (既定のモード)
.png "Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(JA-JP,Expression.30).png")
実行時と同じようにグリッドのサイズを変えられます。このモードでは、作成した列と行の区切り線 .png "Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(JA-JP,Expression.30).png")
を移動した場合、列と行の中にあるオブジェクトのサイズが変更され、[Margin] プロパティは固定されたままになります。キャンバス レイアウト モード
.png "Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(JA-JP,Expression.30).png")
[Canvas] パネル内で編集する場合と同様の編集作業を行うことができます。このモードでは、作成した列と行の区切り線 を移動した場合、列と行の中にあるオブジェクトは固定されたままですが、[Margin] プロパティは更新されます。
この 2 つのモードを切り替えるには、Grid オブジェクトを選択したとき左上隅に表示されるモード アイコンをクリックするか、[ツール] メニューから [オプション] ダイアログ ボックスを表示し、[アートボード] セクションで [グリッド レイアウト モードの使用] チェック ボックスをオンまたはオフにします。
Grid パネルで使用できるレイアウト モード
.png "Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(JA-JP,Expression.30).png")
ドキュメントに [Grid] を追加するには、[アセット] パネル .png "Cc295203.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png")
または [ツール] パネルのレイアウト コンテナー ボタンから [Grid] .png "Cc295203.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png")
を選択し、ポインターをアートボードでドラッグします。
[Grid] オブジェクトの使用方法の詳細については、「行または列の追加と削除」および「行または列のサイズ オプションの変更」を参照してください。
グリッド レイアウト モードで表示されたグリッド パネル内のオブジェクトの配置 (3 行 × 3 列)
.png "Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(JA-JP,Expression.30).png")
配置、サイズ調整、および整列
[Grid] パネルのレイアウトの目的は、Alignment、Margin、および Width と Height のプロパティを使ってオブジェクトの配置、サイズ調整、整列を効率よく行うことです。
Alignment オブジェクトの親オブジェクトに対して、どの位置に要素を配置するかを設定します。
Margins 子オブジェクトの外側とパネル境界の間にあるコントロール周囲の空白の量を設定します。
Width と Height ピクセル単位 (デバイスに依存しない単位、約 1/96 インチ) の固定値で指定します。それぞれのプロパティは、[Auto ] に設定すると、親パネルのサイズ変更に伴って子オブジェクトのサイズも自動的に変更されます。
子オブジェクトの整列
[Grid] レイアウト パネルの領域を分割することで、オブジェクトを整列しきます。これを行うには、列と行の区切り線 を使用して、グリッド内にオブジェクトをレイアウトできる領域を定義する一連の行と列を作成します。[Grid] レイアウト パネルがドキュメント内のアクティブなオブジェクトである場合は、グリッドの上辺と左辺に青色のルーラーが表示されます。[選択内容] ツール .png "Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(JA-JP,Expression.30).png")
を使用してポインターをこれらのルーラーの上に移動すると、カーソルがプラス (+) 記号付きの矢印 .png "Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(JA-JP,Expression.30).png")
に変化し、列または行が追加される位置にオレンジ色の線が表示されます。上辺ルーラーをクリックするとその位置に列が追加され、左辺ルーラーをクリックすると、その位置に行が追加されます。
グリッドの列区切り線の追加
.png "Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(JA-JP,Expression.30).png")
[Grid] レイアウト パネル内に複数の子オブジェクトを描画して、それらを重ね合わせることができます。重なり合った子オブジェクトは、Z オーダー (子オブジェクトが親オブジェクト内で描画または配置された順序) に従って表示されます。オブジェクトの Z オーダーを変更するには、[オブジェクト] メニューの [順序] をクリックするか、[オブジェクトとタイムライン] パネルでアイテムを右クリックし、[順序] をポイントし、目的のコマンドをクリックします。子オブジェクトを複数の列または行にまたがって配置することもできます。
また、スナップを有効にすることで、スナップ ガイドラインに沿ってオブジェクトをより正確に配置することもできます。スナップを有効にすると、アートボード上でオブジェクトをドラッグしたときに、レイアウト パネルなどの同じコンテナー オブジェクト内の他のオブジェクトの余白、ベースライン (テキスト オブジェクトの場合)、配置 (赤い破線) や、グリッド パネルの列と行の区切り線にオブジェクトを沿わせることができます。
詳細については、「位置合わせのオン/オフ」を参照してください。
行と列のサイズ変更
[Grid] レイアウト パネルが グリッド レイアウト モードに移行しているときは、[Grid] パネルの上部と左側のルーラーにロック アイコンが表示されます。これらのロック アイコンを使用して、グリッド内の行と列に対して使用するサイズ変更の種類を設定できます。行の高さを指定する値と、列の幅を指定する値を設定できます。グリッド内の行と列のサイズを設定するオプションは 3 つあり、各オプションがグリッド内の子オブジェクトの配列に影響します。次のサイズ設定オプションがあります。
固定サイズ ピクセル値 (px) を使用します。ロック アイコンをクリックし、[ピクセル サイズ設定済み] (ロック位置)
.png "Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(JA-JP,Expression.30).png")
に設定します。固定サイズは、行または列のサイズが変更されないことを意味します。.gif "メモ")
メモ :Expression Blend プロジェクトでは、ピクセル とはデバイスに依存しないピクセル (デバイスに依存しない単位) であり、画面解像度を 1 インチあたり 96 ドットに設定したモニターでの 1 ピクセルのサイズに相当します。1 単位は、モニターのサイズまたは画面解像度に関係なく約 1/96 インチです。
アスタリスク アスタリスク値 (*) を使用します。ロック アイコンをクリックし、[スター サイズ指定済み] (ロック解除位置)
.png "Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(JA-JP,Expression.30).png")
に設定します。アスタリスクを指定すると、HTML でのパーセント値によるサイズ設定と同様の効果があります。自動サイズ 定義された [Width] または [Height] のプロパティを使用しません。ロック アイコンをクリックし、[サイズ自動設定済 ]
.png "Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(JA-JP,Expression.30).png")
に設定します。自動サイズは、親オブジェクトのサイズが変更されると、グリッド パネル内のオブジェクトのサイズも変更されることを意味します。
グリッド パネルの異なる列に設定されたスター サイズと自動サイズ
.png "Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(JA-JP,Expression.30).png")
アートボード上でグリッド区分線 が選択されているときは、[プロパティ] パネルでサイズ指定オプションを選択できます。アスタリスクまたは固定サイズを使用する場合は、[Width] プロパティを調整できます。列グリッド区切り線の [MaxWidth] プロパティと [MinWidth] プロパティを [プロパティ] パネルで設定することもできます。
子オブジェクトの配置
キャンバス レイアウト モードでオブジェクトを視覚的に配置するには、アートボード上でオブジェクトを直接操作して、グリッド パネル内 (あるいは境界線外側) の任意の場所にドラッグするか、[プロパティ] パネルの [レイアウト] で位置の正確な値を入力します。
グリッド レイアウト モードで、グリッド内の子オブジェクトの位置を細かく設定するには、各オブジェクトの余白を設定します。余白は、グリッドを定義する行または列に対する、またはグリッド内のセルの境界線に対するオブジェクトのオフセットの量を指定します。余白はグリッド内の位置に子オブジェクトをドラッグするときに設定され、選択されたオブジェクトの端から隣接するグリッド線 (行または列) までの距離を表します。余白を設定するには、余白 (ノット) ガイドをクリックします。余白ガイドが開いている (.png "Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(JA-JP,Expression.30).png")
または .png "Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(JA-JP,Expression.30).png")
) 場合、余白が設定されていません。余白ガイドが閉じている (.png "Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(JA-JP,Expression.30).png")
または .png "Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(JA-JP,Expression.30).png")
) 場合、余白は設定されています。実行時にグリッドのサイズを変更すると、余白が設定されていないオブジェクトは元の場所に残ります。余白がバインドされているオブジェクトをサイズ変更すると、そのオブジェクトは余白が保持されたまま移動します。
Expression Blend では、既定の配置のための簡単なルールとして、描画またはサイズ変更した子オブジェクトが行または列の中央にかかる場合は Width と Height が [Auto] になり、そうでない場合は固定になります。グリッドのサイズを変更するときに余白の設定を保持するかどうかを指定する配置オプションを設定することもできます。下の図に示すように、配置はグリッド内で実線 (配置が設定されている) または破線 (配置が設定されていない) で表示されます。
左右にバインドされ (余白が設定され、余白の値が表示される状態)、上下にバインドされていない (余白が設定されていない状態) Grid パネル内のボタン
.png "Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(JA-JP,Expression.30).png")
水平方向の配置
左揃え
.png "Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(JA-JP,Expression.30).png")
左に固定し、サイズ変更時は右に拡大します。中央
.png "Cc295203.02978741-8e12-476d-afa7-165b613ea515(JA-JP,Expression.30).png")
サイズ変更に関係なく、常に水平方向の中央に固定します。右揃え
.png "Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(JA-JP,Expression.30).png")
右に固定し、サイズ変更時は左に拡大します。拡大して表示
.png "Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(JA-JP,Expression.30).png")
サイズ変更時、左右両方に拡大します。
垂直方向の配置
下
.png "Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(JA-JP,Expression.30).png")
下に固定し、サイズ変更時は上に拡大します。中央
.png "Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(JA-JP,Expression.30).png")
サイズ変更に関係なく、常に垂直方向の中央に固定します。上
.png "Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(JA-JP,Expression.30).png")
上に固定し、サイズ変更時は下に拡大します。拡大して表示
.png "Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(JA-JP,Expression.30).png")
サイズ変更時、上下両方に拡大します。
余白の設定値 上、左、右、下の余白を示す、ピクセル単位 (デバイスに依存しない単位、約 1/96 インチ) の固定値です。この値は、グリッド内の位置に子オブジェクトをドラッグするときに設定され、選択されたオブジェクトの境界線から隣接するグリッド線までの距離を表しています。
子オブジェクトのサイズ変更
子オブジェクトのサイズを変更する主な 2 つの方法は、固定サイズ変更と自動サイズ変更です。固定サイズのオブジェクトは、[レイアウト] カテゴリに特定の幅と高さの値が設定されています。自動サイズのオブジェクトは、[Width] と [Height] の値が [Auto] に設定され、親パネルのサイズ変更に伴って自動的にサイズが変更されます。
MinWidth と MinHeight 行または列内のオブジェクトは、この最小値までサイズ変更 (縮小) できます。
MaxWidth と MaxHeight 行または列内のオブジェクトは、この最大値までサイズ変更 (拡大) できます。最大サイズを設定しない場合、この値は [Infinity] に設定されます。
Clip contents 親パネルで子オブジェクトの切り取りを行うかどうかを指定します。
グリッド スプリッター
GridSplitter.png "Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(JA-JP,Expression.30).png")
は、グリッド パネルで使用されるコントロールであり、ユーザーはこのコントロールを操作して、実行時に手動でグリッドの一部をサイズ変更します。GridSplitter は [アセット] パネルに含まれています。
[Grid] パネル、GridSplitter コントロール、およびカスタム レイアウト パネルの作成方法については、Windows Presentation Foundation (WPF) 用 .NET Framework クラス ライブラリの「System.Windows.Controls Namespace」セクション、または Microsoft Silverlight 用 .NET Framework クラス ライブラリの「System.Windows.Controls Namespace」セクションを参照してください。