Share via

グリッド パネル

  • [アーティクル]

このページは WPF および Silverlight 2 に適用されます

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

  • Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(ja-jp,Expression.10).png キャンバス レイアウト モード (既定のモード) では、キャンバス パネル内で編集する場合と同様の編集作業を行うことができます。このモードでは、設定した列と行の区切り線 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(ja-jp,Expression.10).png を移動しても、列と行の中にある要素は固定されたままです。

  • Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(ja-jp,Expression.10).png グリッド レイアウト モード (高度なモード) では、より高度なレイアウト機能を使用できます。このモードでは、設計時のグリッド パネルが実行時グリッドのように動作します。

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

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

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

グリッド パネルをドキュメントに追加するには、レイアウト コンテナのサブメニューまたはツールボックスの [アセット ライブラリ] Cc295203.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png を使用します。

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

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

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

グリッド パネルのレイアウトで重要なのは、配置、余白、Width と Height のプロパティを使って要素の配置、サイズ調整、整列をどのように効率良く行うかということです。

  • 配置   要素の親要素に対して、どの位置に要素を配置するかを設定します。

  • 余白   子要素の外側とパネル境界の間にあるコントロール周囲の空白の量を設定します。

  • 幅と高さ   ピクセル単位またはデバイスに依存しない単位 (約 1/96 インチ) の固定値で指定します。それぞれのプロパティは、[自動] に設定すると、親パネルのサイズ変更に伴って子要素のサイズも自動的に変更されます。

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

子要素の整列

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

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

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

グリッド パネル内に複数の子要素を描画して、それらを重ね合わせることができます。重なり合った子要素は、Z オーダー (子要素が親要素内で描画または配置された順序) に従って表示されます。Z オーダーを変更するには、[オブジェクト] メニューの [順序] をクリックするか、[組み合わせ] パネルの [オブジェクトとタイムライン] でアイテムを右クリックし、[順序] をポイントし、目的のコマンドをクリックします。子要素を複数の列または行にまたがって配置することもできます。また、スナップを有効にすることで、スナップ ガイドラインに沿ってオブジェクトをより正確に配置することもできます。スナップを有効にすると、アートボード上でオブジェクトをドラッグしたときに、レイアウト パネルなどの同じコンテナ要素内の他のオブジェクトの余白、ベースライン (テキスト オブジェクトの場合)、配置 (赤い破線) や、グリッド パネルの列と行の区切り線にオブジェクトを沿わせることができます。

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

行と列のサイズ変更

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

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

    Cc295203.alert_note(ja-jp,Expression.10).gifメモ :

    Windows Presentation Foundation (WPF) アプリケーション (Expression Blend を使用して作成されたアプリケーションなど) では、ピクセルとはデバイスに依存しないピクセル、またはデバイスに依存しない単位であり、画面解像度を 1 インチあたり 96 ドットに設定したモニタでの 1 ピクセルのサイズに相当します。1 単位は、モニタのサイズまたは画面解像度に関係なく約 1/96 インチです。

  • スター サイズ指定 アスタリスク値 (*) を使用します。ロック アイコンをクリックし、[スター サイズ指定済み] (ロック解除位置) Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(ja-jp,Expression.10).png に設定します。スター サイズ指定は、HTML でのパーセント値によるサイズ設定と同様の効果があります。

  • 自動サイズ   定義された幅と高さのプロパティを使用しません。ロック アイコンをクリックし、[サイズ自動設定済] Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(ja-jp,Expression.10).png に設定します。自動サイズは、親要素のサイズが変更されると、グリッド パネル内の要素のサイズも変更されることを意味します。

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

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

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

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

子要素の配置

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

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

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

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

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

  • 水平方向の配置

    • 左 Cc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(ja-jp,Expression.10).png: 左に固定し、サイズ変更時は右に拡大します。

    • 中央 Cc295203.02978741-8e12-476d-afa7-165b613ea515(ja-jp,Expression.10).png: サイズ変更に関係なく、常に水平方向の中央に固定します。

    • 右 Cc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(ja-jp,Expression.10).png: 右に固定し、サイズ変更時は左に拡大します。

    • 拡大して表示 Cc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(ja-jp,Expression.10).png: サイズ変更時、左右両方に拡大します。

  • 垂直方向の配置

    • 下 Cc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(ja-jp,Expression.10).png: 下に固定し、サイズ変更時は上に拡大します。

    • 中央 Cc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(ja-jp,Expression.10).png: サイズ変更に関係なく、常に垂直方向の中央に固定します。

    • 上 Cc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(ja-jp,Expression.10).png: 上に固定し、サイズ変更時は下に拡大します。

    • 拡大して表示 Cc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(ja-jp,Expression.10).png: サイズ変更時、上下両方に拡大します。

  • 余白の設定値 : 上、左、右、下の余白を示す、ピクセル単位またはデバイスに依存しない単位 (約 1/96 インチ) の固定値です。この値は、グリッド内の位置に子要素をドラッグするときに設定され、選択された要素の境界線から隣接するグリッド線までの距離を表しています。

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

子要素のサイズ変更

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

  • MinWidth と MinHeight : 行または列内の要素は、この最小値までサイズ変更 (縮小) できます。

  • MaxWidth と MaxHeight : 行または列内の要素は、この最大値までサイズ変更 (拡大) できます。最大サイズを設定しない場合、この値は [無限大] に設定されます。

  • 内容の切り取り : 親パネルで子要素の切り取りを行うかどうかを指定します。

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

グリッド スプリッタ

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

グリッド パネル、GridSplitter コントロール、およびカスタム レイアウト パネルの作成方法の詳細については、MSDN ライブラリの .NET 開発のセクションを参照してください。

Cc295203.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif先頭に戻る

関連項目

概念

行または列の追加と削除

行または列のサイズ オプションの変更