オブジェクトの配置
レイアウト パネルは、その中に含まれる要素の配置、サイズ、および整列を制御する要素です。レイアウト パネルの機能はコンテナーとよく似ており、アプリケーションのオブジェクトの配置やグループ化に役立ちます。ここでは、Microsoft Expression Blend アプリケーションのレイアウトのデザインに関するトピックについて説明します。
Windows Presentation Foundation (WPF) アプリケーションでのレイアウト システムの詳細については、MSDN の「レイアウト システム を参照してください。
レイアウト パネル
Expression Blend では、さまざまな組み込みレイアウト パネルまたは固有のカスタム パネルを使用して、単純なページと複雑なページの両方を簡単に処理できます。レイアウト パネルは、その中に含まれる他の要素の配置、サイズ、および整列を制御する要素です。レイアウト パネルは基本的にコンテナーとして機能します。レイアウト パネルの便利な用途の 1 つは、パネル内の要素を整理できることです。
.gif "メモ") メモ : |
|---|
Microsoft Silverlight プロジェクトで使用できるレイアウト パネルは、[Grid]、[Canvas]、[StackPanel]、[ScrollViewer]、および [Border] のみです。 |
レイアウト パネルは、暗黙的に実装できるという点で適応性があります。つまり、全体的なレイアウトがウィンドウのサイズに従って自動的にサイズ変更 (自動サイズ設定) されます。これは、さまざまな画面サイズや解像度を可能にするユーザー インターフェイス (UI) を構築する場合や、ローカライズのニーズに対処する場合など、いくつかのシナリオで利点があります。レイアウト パネルを明示的に実装して、固定サイズを使用することもできます。この場合は、レイアウトの Width 属性と Height 属性が固定され、アプリケーション ウィンドウのサイズが変更されても、レイアウト内の領域では指定したサイズが維持されます。
| メモ : |
|---|
オブジェクトの Width プロパティまたは Height プロパティを固定値から Auto に変更すると、プロパティが既定の最小値に設定されます。 |
レイアウト パネル内で要素を変換し、レイアウト後のレンダリング位置を設定することもできます。これは、アニメーションに役立ちます (たとえば、グリッド パネルの境界の外に要素を移動して、その位置に飛ばすことができます)。変換は、レイアウト位置に対して相対的です。したがって、[プロパティ] パネルの [変換] カテゴリには、既定の位置が (0,0) として表示されます。ほとんどの場合、最後のレイアウト位置との相対で要素を移動するアニメーションを除き、レイアウト パネル内の要素には変換を適用しません。
Expression Blend には、それぞれ異なる種類のレイアウトを管理するようにデザインされた 5 つの主要レイアウト パネルがあります。次の表で、これらのレイアウト パネルについて説明します。
パネル |
名前 |
説明 |
|---|---|---|
.png "Cc295017.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png") |
Grid |
行と列でグリッドを構成する柔軟性のあるレイアウトで子要素を整列します。 詳細については、「グリッド レイアウト パネルの使用」を参照してください。 |
.png "Cc295017.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(JA-JP,Expression.30).png") |
Canvas |
絶対的な X、Y 座標に従って子要素を整列します。実行時に画面上の固定位置に要素を配置でき、空白のキャンバスのように使用できます。 詳細については、「キャンバス レイアウト パネルの使用」を参照してください。 |
.png "Cc295017.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(JA-JP,Expression.30).png") |
StackPanel |
水平方向または垂直方向に積み重ねて、子要素を一列に整列します。 詳細については、「StackPanel レイアウト パネルの使用」を参照してください。 |
.png "Cc295017.91486eda-6173-4ce8-9610-4f296dcb83d7(JA-JP,Expression.30).png") |
WrapPanel |
左から右に並べて子要素を整列します。パネルの右側の境界線でスペースがなくなると、次の行に内容を折り返します。左から右に、上方から下方に整列されます。このパネルの方向を垂直に設定し、上から下への子要素の整列を、左から右に繰り返すこともできます。 詳細については、「WrapPanel レイアウト パネルの使用」を参照してください。 |
.png "Cc295017.db9f1ff5-6bca-441d-b289-c6781a478a5b(JA-JP,Expression.30).png") |
DockPanel |
子要素をパネルの 1 辺に沿うように (ドッキングして) 整列します。 詳細については、「DockPanel レイアウト パネルの使用」を参照してください。 |
その他のレイアウト コンテナー
その他のレイアウト コンテナーも、含まれる要素の配置に影響します。ただし、これらのコンテナーは、主要レイアウト パネルでより適切に処理される堅牢な UI シナリオをサポートするようには最適化されていません。次の表で、その他のレイアウト コンテナーについて説明します。
要素 |
名前 |
説明 |
|---|---|---|
.png "Cc295017.be354518-c54c-4f86-9c57-0b4a9d384b3e(JA-JP,Expression.30).png") |
Border |
要素の周囲に枠線、背景、またはその両方を描画する単純な要素です。[Border] は子要素を 1 つだけ含むことができます。複数の子要素を扱えるようにするには、内部にグリッドまたはキャンバス パネルを配置します。 [Border] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
.png "Cc295017.0cc3e2a4-7a8b-48ef-abad-c3673ac774d8(JA-JP,Expression.30).png") |
BulletDecorator |
子要素を 2 つだけ含むことができる要素です。通常は、テキスト文字列と字形 (チェック ボックスなどのコントロールを表す) が含まれます。 [BulletDecorator] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
.png "Cc295017.5d9046cc-9edb-45eb-8c59-30af398f7b6c(JA-JP,Expression.30).png") |
Popup |
アプリケーション内の他のどのコンテンツよりも前にレンダリングされるウィンドウであり、他の要素を基準とします。ポップアップ メニューを使用すると、そのポップアップ メニューに関連する UI の主要部分を操作するユーザーに対して、追加情報とオプションを提示できます。[Popup] は子要素を 1 つ含むことができ、対象の要素に基づいて配置されます。既定では、[Popup] の単一の子要素はグリッド パネルです。[Popup] を描画した後すぐ、[Grid] パネルを使用して [Popup] 内の複数の子要素を操作できます。ほとんどの場合、ポップアップ メニューを自身で直接作成する必要はありません。代わりに、メニューやコンボ ボックスなど、テンプレートにポップアップ メニューを持つコントロールを使用できます。 [Popup] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
.png "Cc295017.5ca26a94-31cd-4fda-83c5-a9564b5b019d(JA-JP,Expression.30).png") |
ScrollViewer |
この要素を使用すると、それに含まれる子要素をスクロールできます。[ScrollViewer] は子要素を 1 つだけ含むことができます。したがって、通常は、[Stack]、[Canvas]、[Grid] などのレイアウト パネルを内部で使用します。[ScrollViewer] は、コンテンツのスクロールをサポートするために、リスト ボックスなどの他のコントロールのテンプレート内で使用されます。[ScrollViewer] 内のコンテンツが大きすぎる場合は、コンテンツの切り取りを有効にすることができます。スクロール バーの無効化、非表示、表示、または必要なときのみの自動表示も制御できます。 [ScrollViewer] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
.png "Cc295017.f14d64f5-fb79-4d1d-a29e-05dd6f440e98(JA-JP,Expression.30).png") |
UniformGrid |
同形の統一されたグリッド領域内に子要素を整列します。[UniformGrid] は、[Grid] パネルの変形ではありません。指定した行数と列数に基づいて内部の各要素の領域を統一するため、タイル レイアウト要素と見なす方が適切です。[UniformGrid] に子要素を追加すると、グリッドが埋められるまで、各要素が左から右に、上方から下方に向かって配置されます。これは、イメージ一覧などのコントロールで有用です。 [UniformGrid] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
.png "Cc295017.16691128-7f3d-45e0-b532-45e8a7162416(JA-JP,Expression.30).png") |
Viewbox |
ズーム コントロールとほぼ同じように、すべての子要素を拡大縮小します。Viewbox には子要素を 1 つしか追加できません。そのため、通常は内部にキャンバス パネルまたはグリッド パネルを配置して、複数の子要素にズーム効果を適用できるようにします。 [Viewbox] の詳細については、「その他のレイアウト コンテナー」を参照してください。 |
ルート レイアウト コンテナー
[オブジェクトとタイムライン] パネルには、[LayoutRoot] という要素があります。これは、Expression Blend ドキュメント内のルート レイアウト パネルを表します。既定では、レイアウトのルートは [Grid] パネルです。ほとんどの場合、[Grid] パネルには最上位のページ レイアウトとして十分な機能があります。レイアウトのルートを別のレイアウト パネルに変更する場合は、ルート レイアウト パネルを右クリックし、[レイアウトの種類の変更] をポイントして別のレイアウト パネルを選択します。既定の [LayoutRoot] に [Grid] パネルではなく [Canvas] パネルを選択することもできます。このためには、[ツール] メニューから [オプション] ダイアログ ボックスを表示して、[プロジェクト] にある [新しいアイテムの既定のレイアウトとしてグリッド パネルを使用する] チェック ボックスをオフにします。
子要素の使用方法
Expression Blend では、ドキュメントのルート (最上位) パネルに子要素が追加されます。ただし、別のレイアウト コンテナーがオブジェクト ツリーの別の場所でアクティブになっている場合は、子要素がそのコンテナーに追加されます。レイアウト パネルをクリックすると、要素をアクティブにできます。アクティブな要素はパネル周囲の青色のハイライトで示されます。青色のハイライトはアートボードと [オブジェクトとタイムライン] パネルの両方に表示されます。新しいパネルを作成すると、子要素がそのパネルの枠線の内部に直ちに描画されます。子要素は作成したパネルに挿入されることに注意してください。これは、新しく作成したパネルが自動的にアクティブな要素になるからです。
新しい子オブジェクトが追加されるアクティブな [colors2] という [StackPanel] オブジェクト、
.png "Cc295017.a3b049ca-8d4c-417c-88e7-786a583c699a(JA-JP,Expression.30).png")
Expression Blend では、パネル間で子要素をドラッグして、簡単に別のレイアウト コンテナーに親を変更することもできます。次の図は、オレンジ色の楕円がルート レイアウトのグリッド パネルから別のグリッド パネルに移動されるようすを示しています。パネルに子要素を追加できる場合は、破線の境界ボックスとテキスト プロンプトがパネルの周囲に表示されます。Alt キーを押したままマウス ボタンを放して、親の変更アクションを完了します。
ルートのグリッド パネルから別のグリッド パネルへのオブジェクトの親の変更
.png "Cc295017.95d9db96-a236-4ed6-b6ba-a141a8168dde(JA-JP,Expression.30).png")
複雑なレイアウト
ページをレイアウトするときに、単一のレイアウト パネルでは実現できない柔軟性が必要になることがあります。複雑なレイアウトを作成する場合は、別のレイアウト パネルを収容するコンテナーとしてレイアウト パネルを使用する方法があります。たとえば、既定ではグリッド パネルである [LayoutRoot] でドック パネルを使用する場合があります。これにより、ページを複数の領域に分割し、それぞれの領域に 1 つまたは複数のコントロールを追加できます。
レイアウトのプログラミングに関する詳細については、「MSDN ライブラリ」の「.NET 開発」を参照してください。