グリッドレイアウトパネルの使用

Grid レイアウトパネルは、特定のレイアウト機能に対応して設計されている他のレイアウトコンテナーに比べ、非常に柔軟性の高いレイアウトコンテナーです。Microsoft Expression Blend の Grid レイアウトパネルは、次の 2 種類のレイアウト編集モードで使用できます。

グリッドレイアウトモード (既定のモード) 実行時と同じように Grid のサイズを変えられます。このモードでは、作成した列と行の区切り線を移動した場合、列と行の中にあるオブジェクトのサイズが変更され、Margin プロパティは固定されたままになります。
キャンバスレイアウトモード [Canvas] パネル内で編集する場合と同様の編集作業を行うことができます。このモードでは、作成した列と行の区切り線を移動した場合、列と行の中にあるオブジェクトは固定されたままですが、Margin プロパティは更新されます。

2 つのモード間を切り替えるには、Grid オブジェクトを選択したときに左上隅に表示されるモードアイコンをクリックするか、[ツール] メニューから [オプション] ダイアログボックスを表示し、[アートボード] にある [グリッドレイアウトモードの使用] チェックボックスをオンまたはオフにします。

Grid パネルで使用できるレイアウトモード

Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(ja-jp,Expression.40).png

Grid レイアウトパネルをドキュメントに追加するには、[アセット] パネル Cc295203.0d8b8d29-1af9-418f-8741-be3097d76eab(ja-jp,Expression.40).png から、または [ツール] パネルのレイアウトコンテナーボタンから Grid Cc295203.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.40).png を選択して、ポインターを使ってアートボードにドラッグします。次の XAML コードがプロジェクトに追加されます。

<Grid/>

Grid オブジェクトの操作の詳細については、「行または列の追加と削除」および「行または列のサイズオプションの変更」を参照してください。

グリッドレイアウトモードで表示されたグリッドパネル内のオブジェクトの配置 (3 行 × 3 列)

Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(ja-jp,Expression.40).png

配置、サイズ調整、および整列

Grid パネルのレイアウトの目的は、Alignment、Margin、および Width と Height のプロパティを使ってオブジェクトの配置、サイズ調整、整列を効率よく行うことです。

Alignment オブジェクトの親オブジェクトに対して、どの位置に要素を配置するかを設定します。
Margins 子オブジェクトの外側とパネル境界の間にあるコントロール周囲の空白の量を設定します。
Width と Height ピクセル単位 (デバイスに依存しない単位、約 1/96 インチ) の固定値で指定します。それぞれのプロパティは、[自動] に設定すると、親パネルのサイズ変更に伴って子オブジェクトのサイズも自動的に変更されます。

子オブジェクトの整列

Grid レイアウトパネルの領域を分割することで、オブジェクトを整列できます。これを行うには、列と行の区切り線 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(ja-jp,Expression.40).png を使用して、グリッド内にオブジェクトをレイアウトできる領域を定義する一連の行と列を作成します。Grid レイアウトパネルがドキュメント内のアクティブなオブジェクトである場合は、グリッドの上辺と左辺に青色のルーラーが表示されます。[選択内容] ツール Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.40).png を使用してポインターをこれらのルーラーの上に移動すると、カーソルがプラス (+) 記号付きの矢印 Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(ja-jp,Expression.40).png に変化し、列または行が追加される位置にオレンジ色の線が表示されます。上辺ルーラーをクリックするとその位置に列が追加され、左辺ルーラーをクリックすると、その位置に行が追加されます。

グリッドの列区切り線の追加

Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(ja-jp,Expression.40).png

Grid レイアウトパネル内に複数の子オブジェクトを描画して、それらを重ね合わせることができます。重なり合った子オブジェクトは、Z オーダー (子オブジェクトが親オブジェクト内で描画または配置された順序) に従って表示されます。オブジェクトの Z オーダーを変更するには、[オブジェクト] メニューの [順序] をクリックするか、[オブジェクトとタイムライン] パネルでアイテムを右クリックし、[順序] をポイントし、目的のコマンドをクリックします。子オブジェクトを複数の列または行にまたがって配置することもできます。

また、スナップを有効にすることで、スナップガイドラインに沿ってオブジェクトをより正確に配置することもできます。スナップを有効にすると、アートボード上でオブジェクトをドラッグしたときに、レイアウトパネルなどの同じコンテナーオブジェクト内の他のオブジェクトの余白、ベースライン (テキストオブジェクトの場合)、配置 (赤い破線) や、グリッドパネルの列と行の区切り線にオブジェクトを沿わせることができます。

詳細については、「位置合わせのオン/オフ」を参照してください。

行と列のサイズ変更

Grid レイアウトパネルがグリッドレイアウトモードに移行しているときは、グリッドパネルの上部と左側のルーラーにロックアイコンが表示されます。これらのロックアイコンを使用して、グリッド内の行と列に対して使用するサイズ変更の種類を設定できます。行の高さを指定する値と、列の幅を指定する値を設定できます。グリッド内の行と列のサイズを設定するオプションは 3 つあり、各オプションがグリッド内の子オブジェクトの配列に影響します。次のサイズ設定オプションがあります。

固定サイズ ピクセル値 (px) を使用します。ロックアイコンをクリックし、[ピクセルサイズ設定済み] (ロック位置) Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(ja-jp,Expression.40).png に設定します。固定サイズは、行または列のサイズが変更されないことを意味します。

メモ :
Expression Blend プロジェクトでは、ピクセルとはデバイスに依存しないピクセル (デバイスに依存しない単位) であり、画面解像度を 1 インチあたり 96 ドットに設定したモニターでの 1 ピクセルのサイズに相当します。1 単位は、モニターのサイズまたは画面解像度に関係なく約 1/96 インチです。

比例サイズ アスタリスク値 (*) を使用します。ロックアイコンをクリックし、[比例サイズ] (ロック解除位置) に設定します。比例サイズを指定すると、HTML でのパーセント値によるサイズ設定と同様の効果があります。
自動サイズ 定義された [Width] または [Height] のプロパティを使用しません。ロックアイコンをクリックし、[サイズ自動設定済 ] に設定します。自動サイズは、親オブジェクトのサイズが変更されると、グリッドパネル内のオブジェクトのサイズも変更されることを意味します。

グリッドパネルの異なる列に設定された比例サイズと自動サイズ

Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(ja-jp,Expression.40).png

アートボード上でグリッド区分線 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(ja-jp,Expression.40).png が選択されているときは、[プロパティ] パネルでサイズ指定オプションを選択できます。アスタリスクまたは固定サイズを使用する場合は、Width プロパティを調整できます。列グリッド区切り線の MaxWidth プロパティと MinWidth プロパティを [プロパティ] パネルで設定することもできます。

子オブジェクトの配置

キャンバスレイアウトモードでオブジェクトを視覚的に配置するには、アートボード上でオブジェクトを直接操作して、グリッドパネル内 (あるいは境界線外側) の任意の場所にドラッグするか、[プロパティ] パネルの [レイアウト] で位置の正確な値を入力します。

グリッドレイアウトモードで、グリッド内の子オブジェクトの位置を細かく設定するには、各オブジェクトの余白を設定します。余白は、グリッドを定義する行または列に対する、またはグリッド内のセルの境界線に対するオブジェクトのオフセットの量を指定します。余白はグリッド内の位置に子オブジェクトをドラッグするときに設定され、選択されたオブジェクトの端から隣接するグリッド線 (行または列) までの距離を表します。余白を設定するには、余白 (ノット) ガイドをクリックします。余白ガイドが開いている ( Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(ja-jp,Expression.40).png または Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(ja-jp,Expression.40).png ) 場合、余白が設定されていません。余白ガイドが閉じている ( Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(ja-jp,Expression.40).png または Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(ja-jp,Expression.40).png ) 場合、余白は設定されています。実行時にグリッドのサイズを変更すると、余白が設定されていないオブジェクトは元の場所に残ります。余白がバインドされているオブジェクトをサイズ変更すると、そのオブジェクトは余白が保持されたまま移動します。

Expression Blend では、既定の配置のための簡単なルールとして、描画またはサイズ変更した子オブジェクトが行または列の中央にかかる場合は Width と Height が [Auto] になり、そうでない場合は固定になります。グリッドのサイズを変更するときに余白の設定を保持するかどうかを指定する配置オプションを設定することもできます。下の図に示すように、配置はグリッド内で実線 (配置が設定されている) または破線 (配置が設定されていない) で表示されます。

左右にバインドされ (余白が設定され、余白の値が表示される状態)、上下にバインドされていない (余白が設定されていない状態) Grid パネル内のボタン

Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(ja-jp,Expression.40).png

水平方向の配置
- 左揃え 左に固定し、サイズ変更時は右に拡大します。
- 中央サイズ変更に関係なく、常に水平方向の中央に固定します。
- 右揃え 右に固定し、サイズ変更時は左に拡大します。
- 拡大して表示 サイズ変更時、左右両方に拡大します。
垂直方向の配置
- 下下に固定し、サイズ変更時は上に拡大します。
- 中央サイズ変更に関係なく、常に垂直方向の中央に固定します。
- 上上に固定し、サイズ変更時は下に拡大します。
- 拡大して表示 サイズ変更時、上下両方に拡大します。
余白の設定値 上、左、右、下の余白を示す、ピクセル単位 (デバイスに依存しない単位、約 1/96 インチ) の固定値です。この値は、グリッド内の位置に子オブジェクトをドラッグするときに設定され、選択されたオブジェクトの境界線から隣接するグリッド線までの距離を表しています。

子オブジェクトのサイズ変更

子オブジェクトのサイズを変更する主な 2 つの方法は、固定サイズ変更と自動サイズ変更です。固定サイズのオブジェクトは、[レイアウト] カテゴリに特定の幅と高さの値が設定されています。自動サイズのオブジェクトは、[Width] と [Height] の値が [自動] に設定され、親パネルのサイズ変更に伴って自動的にサイズが変更されます。

MinWidth と MinHeight 行または列内のオブジェクトは、この最小値までサイズ変更 (縮小) できます。
MaxWidth と MaxHeight 行または列内のオブジェクトは、この最大値までサイズ変更 (拡大) できます。最大サイズを設定しない場合、この値は [Infinity] に設定されます。
Clip contents 親パネルで子オブジェクトの切り取りを行うかどうかを指定します。

グリッドスプリッター

GridSplitter Cc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(ja-jp,Expression.40).png は、グリッドパネルで使用されるコントロールであり、ユーザーはこのコントロールを操作して、実行時に手動でグリッドの一部をサイズ変更します。GridSplitter は [アセット] パネルに含まれています。

[Grid] パネル、GridSplitter コントロール、およびカスタムレイアウトパネルの作成方法については、Windows Presentation Foundation (WPF) 用 .NET Framework クラスライブラリの「System.Windows.Controls Namespace Cc295203.xtlink_newWindow(ja-jp,Expression.40).png 」セクション、または Microsoft Silverlight 用 .NET Framework クラスライブラリの「System.Windows.Controls Namespace 」セクションを参照してください。

グリッド レイアウト パネルの使用