絶対配置と動的配置によるレイアウト

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

アプリケーションのウィンドウを作成するときには、ウィンドウ上でのコントロールのレイアウト方法を決定する必要があります。また、ユーザーがウィンドウのサイズを変更したときにウィンドウ内のコントロールがどのように動作するかについても決定する必要があります。これらは、絶対配置と動的配置に関する問題です。

アプリケーションのウィンドウを作成するときには、ウィンドウのサイズとウィンドウ内のコントロールのサイズを設定します。コンテンツの変化に応じたウィンドウとコントロールの動作方法を決定する必要があります。たとえば、ウィンドウにラベルコントロールを追加するときには、ラベルのテキストが別の言語に翻訳された場合にラベルがどのように動作するかを指定できます。これらは動的なサイズ変更に関する問題です。

レイアウトの種類

Windows Presentation Foundation (WPF) Designer for Visual Studio では、次の 3 種類のレイアウトを作成できます。

絶対レイアウト
子要素を配置するには、親要素を基準とする正確な位置を指定します。たとえば、コントロールをパネル上に配置する場合は、パネルを基準としてコントロールの左端および上端の座標を指定します。親要素のサイズが変更されても子要素の位置は変わりません。詳細については、「方法 : 絶対配置に基づくレイアウトを構築する」または「チュートリアル : 絶対配置に基づくレイアウトの構築」を参照してください。
動的レイアウト
子要素を配置するときには、親要素を基準として配置方法と折り返し方法を指定します。たとえば、コントロールをパネル上に配置し、水平方向に折り返すように指定することもできます。親要素が縮小されると、子要素は次の行に移動します。親要素が拡大されると、子要素は前の行に移動します。詳細については、「方法 : 動的レイアウトを構築する」または「チュートリアル : 動的レイアウトの構築」を参照してください。
データドリブン動的レイアウト
コントロールをデータにバインドします。データがすべて収まるようにコントロールのサイズが調整され、データの形式に合わせて行と列のスタイルが設定されます。

可能な限り動的レイアウトを使用することをお勧めします。動的レイアウトは、最も柔軟性が高く、エンドユーザーも自らの環境を最も高いレベルで制御できます。動的レイアウトでは、コンテンツがローカリゼーションなどの変更に適応できます。絶対レイアウトは、要素を正確な位置に配置し、その位置が変化しないことが必要な場合や、子要素がイメージやグラフィックなどで、1 つしかない場合のみ使用してください。

メモ :
絶対レイアウトと動的レイアウトを組み合わせることができます。たとえば、ウィンドウ全体を動的レイアウトとし、部分的に絶対配置を使用することもできます。

パネル

WPF には、絶対配置と動的配置をサポートする Panel コントロールが数多く用意されています。パネルコントロールを別のパネルコントロールの子コントロールとして追加することにより、複数のパネルコントロールを組み合わせることができます。以下のパネルコントロールを使用して、アプリケーション内に要素を配置することができます。

Panel	レイアウトの種類	説明
Grid	動的	子要素を列および行に配置できる領域を定義します。
DockPanel	動的	子要素を上端、下端、左端、または右端にドッキングし、垂直方向に並べて配置できる領域を定義します。
WrapPanel	動的	子要素を順に自動配置し、コンテンツを親コンテナの端で改行して次の行に送ります。子要素の配列順は、向きが水平方向と垂直方向のどちらに設定されているかによって、上から下と左から右のいずれかとなります。
StackPanel	動的	子要素を自動的に水平方向または垂直方向の 1 つの行に配置します。
UniformGrid	動的	子要素を自動的に行と列に配置します。行と列は等間隔に配置されます。セルに入りきらない要素は切り詰められます。
Canvas	絶対レイアウト	座標を使用して子要素を明示的に配置できる領域を定義します。

コントロール

WPF には、データドリブン動的配置をサポートするコントロールが用意されています。それらのコントロールはデータにバインドでき、データに合わせて自動的にサイズが調整されます。以下のコントロールを使用して、アプリケーションにデータを動的に表示できます。

コントロール	レイアウトの種類	説明
ListView	データドリブン動的	データ項目の一覧を表示します。
GridView	データドリブン動的	データ項目をリストビューコントロールの列に表示します。

動的なサイズ変更

動的なサイズ変更を適用したコントロールは、コンテンツに合わせて自動的に伸縮します。たとえば、ある言語のテキストに合わせてラベルコントロールのサイズを設定し、そのテキストが別の言語に翻訳される場合は、翻訳されたテキストに合わせて自動的にサイズが変更されるようにラベルを設定できます。動的配置は、コントロールのサイズが変化したときに自動的に位置を調整することにより、動的なサイズ変更に対応します。

動的レイアウトの作成に役立つプロパティを次に示します。

プロパティ	値	対象	説明
Width	double、Auto、*	ウィンドウ、コントロール、グリッド列	柔軟性を最大限に高めるには、Auto とスター (アスタリスク) によるサイズ変更を使用します。詳細については、次のセクションを参照してください。* はグリッド列にのみ適用されます。
Height	double、Auto、*	ウィンドウ、コントロール、グリッド行	柔軟性を最大限に高めるには、Auto とスター (アスタリスク) によるサイズ変更を使用します。詳細については、次のセクションを参照してください。* はグリッド列にのみ適用されます。
MinWidth	double	ウィンドウ、コントロール、グリッド列	柔軟性を最大限に高めるには、0 に設定します。
MinHeight	double	ウィンドウ、コントロール、グリッド行	柔軟性を最大限に高めるには、0 に設定します。
MaxWidth	double、Infinity	ウィンドウ、コントロール、グリッド列	柔軟性を最大限に高めるには、Infinity に設定します。
MaxHeight	double、Infinity	ウィンドウ、コントロール、グリッド行	柔軟性を最大限に高めるには、Infinity に設定します。
ResizeMode	NoResize CanMinimize CanResize CanResizeWithGrip	ウィンドウ	柔軟性を最大限に高めるには、CanResize に設定します。これにより、ユーザーがウィンドウのサイズを変更できます。
SizeToContent	Manual Width Height WidthAndHeight	ウィンドウ	柔軟性を最大限に高めるには、WidthAndHeight に設定します。これにより、コンテンツが拡大されたときにウィンドウのサイズが自動的に調整されます。

自動サイズ変更とスター (アスタリスク) によるサイズ変更

自動サイズ変更では、コンテンツのサイズが変わっても、コンテンツ全体が表示されるようにコントロールのサイズが調整されます。スター (アスタリスク) によるサイズ変更では、使用可能なスペースをグリッドの行および列の間で加重比率に基づいて配分できます。XAML (Extensible Application Markup Language) では、スター値は * (または n*) と表現されます。たとえば、4 列のグリッドでは、列の幅を次のように設定できます。

列 1	Auto	コンテンツに合わせて列のサイズが調整されます。
列 2	*	Auto に設定された列が計算され、残った幅が列 2 に割り当てられます。列 2 の幅は列 4 の半分になります。
列 3	Auto	コンテンツに合わせて列のサイズが調整されます。
列 4	2*	Auto に設定された列が計算され、残った幅が列 4 に割り当てられます。列 4 の幅は列 2 の 2 倍になります。