チュートリアル : FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置

更新 : 2007 年 11 月

アプリケーションによっては、フォームのサイズを変更したり、コンテンツのサイズが変化したりしたときに、それに応じて自動的にレイアウトを調整するフォームが必要です。動的なレイアウトが必要であり、しかも Layout イベントをコードで明示的に処理しない場合は、レイアウト パネルの使用を検討してください。

FlowLayoutPanel コントロールや TableLayoutPanel コントロールを使用すると、コントロールをフォームに直観的に配置できます。これら 2 つのコントロールは、それぞれに含まれる子コントロールの相対位置を制御するための自動的で設定可能な機能を提供します。また、実行時に動的なレイアウト機能を提供するため、親フォームの寸法の変更に応じて子コントロールのサイズと位置を変更できます。また、レイアウト パネルは他のレイアウト パネルの入れ子にすることもできるため、高度なユーザー インターフェイスを実現できます。

TableLayoutPanel は、その内容をグリッドに配置し、HTML <table> 要素と同じような機能を提供します。このレイアウト パネルのセルは行と列に配置され、それぞれ異なったサイズを設定できます。詳細については、「チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。

FlowLayoutPanel は、その内容を特定のフロー方向 (水平または垂直方向) に配置します。このコントロールの内容は、ある行から次の行、またはある列から次の列に折り返すことができます。また、折り返さずにクリップすることもできます。このチュートリアルでは、以下のタスクを行います。

• Windows フォーム プロジェクトの作成

• コントロールの水平配置または垂直配置

• フロー方向の変更

• フロー中断の挿入

• 埋め込みとマージンを使用したコントロールの配置

• ツールボックスでのダブルクリックによるコントロールの挿入

• アウトラインの描画によるコントロールの挿入

• キャレットを使用したコントロールの挿入

• 別の親コントロールへの既存コントロールの再割り当て

ここでは、これらの重要なレイアウト機能が果たす役割について理解します。

メモ :
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

プロジェクトの作成

最初にプロジェクトを作成し、フォームを設定します。

プロジェクトを作成するには

1. "FlowLayoutPanelExample" という名前の Windows ベース アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。

2. フォーム デザイナでフォームを選択します。

コントロールの水平配置または垂直配置

FlowLayoutPanel コントロールでは、コントロールを行や列に沿って配置でき、個々のコントロールの位置を正確に指定する必要がありません。

FlowLayoutPanel コントロールでは、親フォームの寸法の変更に応じて、子コントロールのサイズやフローを変更できます。

FlowLayoutPanel を使用してコントロールを水平方向または垂直方向に配置するには

1. ツールボックスから FlowLayoutPanel コントロールをフォームにドラッグします。

2. ツールボックスから Button コントロールを FlowLayoutPanel にドラッグします。Button コントロールは、FlowLayoutPanel コントロールの左上隅に自動的に移動します。

3. ツールボックスから別の Button コントロールを FlowLayoutPanel にドラッグします。Button コントロールが、最初の Button コントロールの横の位置に自動的に移動します。FlowLayoutPanel が狭すぎて、2 つのコントロールが同じ行に入りきらない場合、新しい Button コントロールは次の行に自動的に移動します。

4. ツールボックスからさらにいくつかの Button コントロールを FlowLayoutPanel にドラッグします。次の行に折り返すまで、Button コントロールを続けて配置します。

5. FlowLayoutPanel コントロールの WrapContents プロパティの値を false に変更します。子コントロールが次の行にフローしなくなり、代わりに最初の行に移動してクリップされます。

6. FlowLayoutPanel コントロールの WrapContents プロパティの値を true に変更します。子コントロールが再び次の行に折り返されます。

7. すべての Button コントロールが最初の列に移動するまで、FlowLayoutPanel コントロールの幅を縮小します。

8. すべての Button コントロールが最初の行に移動するまで、FlowLayoutPanel コントロールの幅を拡大します。幅の拡大に対応できるように、フォームのサイズ変更が必要になる場合があります。

フロー方向の変更

FlowDirection プロパティを使用すると、コントロールの配置方向を変更できます。子コントロールは左から右、右から左、上から下、または下から上に配置できます。

FlowLayoutPanel でのフロー方向を変更するには

1. FlowLayoutPanel コントロールの FlowDirection プロパティの値を TopDown に変更します。コントロールの高さに応じて、子コントロールが 1 つ以上の列に再配置されます。

2. FlowLayoutPanel のサイズを変更し、その高さを Button コントロールの列よりも小さくします。FlowLayoutPanel の子コントロールが次の列にフローします。引き続き高さを小さくしていくと、子コントロールが逐次、次の列にフローしていきます。FlowLayoutPanel コントロールの FlowDirection プロパティの値を RightToLeft に変更します。子コントロールの位置が反転します。FlowDirection プロパティの値を BottomUp に変更したときのレイアウトを確認してください。

フロー中断の挿入

FlowLayoutPanel コントロールでは、その子コントロールに FlowBreak プロパティを指定できます。FlowBreak プロパティの値を true に設定すると、FlowLayoutPanel コントロール上の子コントロールが現在のフロー方向に配置されずに次の行または列に折り返されます。

フロー中断を挿入するには

1. FlowLayoutPanel コントロールの FlowDirection プロパティの値を TopDown に変更します。

2. 左端の列の中ほどにある、Button コントロールの 1 つを選択します。

3. Button コントロールの FlowBreak プロパティの値を true に設定します。列が区切られ、選択した Button コントロールよりも後のコントロールが次の列にフローします。Button コントロールの FlowBreak プロパティの値を false に設定すると、元の動作に戻ります。

ドッキングと固定を使用したコントロールの配置

子コントロールのドッキング動作と固定動作は、他のコンテナ コントロールでの動作と異なります。ドッキングも固定も、同じフロー方向で最も大きいコントロールが基準になります。

ドッキングと固定を使用してコントロールを配置するには

1. Button コントロールがすべて 1 列に配置されるまで、FlowLayoutPanel のサイズを拡大します。

2. 1 番上にある Button コントロールを選択します。選択したコントロールの幅を拡大し、他の Button コントロールの約 2 倍の幅にします。

3. 2 番目の Button コントロールを選択します。Anchor プロパティの値を Right に変更します。選択したコントロールが移動し、その右側の境界線が 1 番目の Button コントロールの右側の境界線と揃います。

4. Anchor プロパティの値を Right および Left に変更します。サイズが変更され、1 番目の Button コントロールと同じ幅になります。

5. 3 番目の Button コントロールを選択します。Dock プロパティの値を Fill に変更します。サイズが変更され、1 番目の Button コントロールと同じ幅になります。

埋め込みとマージンを使用したコントロールの配置

FlowLayoutPanel コントロールには、Padding プロパティと Margin プロパティの値を変更してコントロールを配置することもできます。

Padding プロパティを使用すると、FlowLayoutPanel コントロールのセル内でコントロールの配置を制御できます。このプロパティは、子コントロールと FlowLayoutPanel コントロールの境界の間の間隔を指定します。

Margin プロパティでは、子コントロール間の間隔を制御できます。

Padding プロパティと Margin プロパティを使用してコントロールを配置するには

1. FlowLayoutPanel コントロールの Dock プロパティの値を Fill に変更します。フォームの大きさが十分にある場合、Button コントロールは FlowLayoutPanel コントロールの最初の列に移動します。

2. FlowLayoutPanel コントロールの Padding プロパティの値を変更します。これを行うには、[プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 20 に設定します。詳細については、「チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト」を参照してください。子コントロールが FlowLayoutPanel コントロールの中央に移動します。Padding プロパティの値を大きくすると、子コントロールが FlowLayoutPanel コントロールの境界から離れます。

3. FlowLayoutPanel 内の Button コントロールをすべて選択し、Margin プロパティの値を 20 に設定します。Button コントロール間の間隔が広がり、各コントロールが離れます。一部の子コントロールが隠れてしまった場合は、FlowLayoutPanel コントロールのサイズを拡大する必要があります。

ツールボックスでのダブルクリックによるコントロールの挿入

ツールボックスでコントロールをダブルクリックすることにより、そのコントロールを FlowLayoutPanel コントロールに挿入できます。

ツールボックスでダブルクリックしてコントロールを挿入するには

1. ツールボックスの Button コントロール アイコンをダブルクリックします。新しい Button コントロールが FlowLayoutPanel コントロールに表示されます。

2. ツールボックスでさらにいくつかのコントロールをダブルクリックします。新しいコントロールが FlowLayoutPanel コントロールに順次表示されます。

アウトラインの描画によるコントロールの挿入

セルにコントロールのアウトラインを描画することによって、コントロールを FlowLayoutPanel コントロールに挿入し、サイズを指定できます。

アウトラインを描画してコントロールを挿入するには

1. ツールボックスの Button コントロール アイコンをクリックします。フォームにドラッグしないでください。

2. FlowLayoutPanel コントロールにマウス ポインタを置きます。ポインタの形が、Button コントロール アイコンの付いた十字カーソルに変わります。

3. マウス ボタンを押したままにします。

4. マウス ポインタをドラッグして、Button コントロールのアウトラインを描画します。適切なサイズのアウトラインを描画したら、マウス ボタンを離します。FlowLayoutPanel コントロール上の次の空き位置に Button コントロールが作成されます。

挿入バーを使用したコントロールの挿入

FlowLayoutPanel コントロールの特定の位置にコントロールを挿入できます。FlowLayoutPanel コントロールのクライアント領域にコントロールをドラッグすると、コントロールの挿入位置を示す挿入バーが表示されます。

キャレットを使用してコントロールを挿入するには

1. ツールボックスから Button コントロールを FlowLayoutPanel コントロールにドラッグし、2 つの Button コントロールの間の領域をポイントします。挿入バーが描画され、Button を FlowLayoutPanel コントロールにドロップしたときに挿入される位置が示されます。新しい Button コントロールを FlowLayoutPanel コントロールにドロップする前に、マウス ポインタを移動してみて、挿入バーがどのように移動するかを確認します。

2. 新しい Button コントロールを FlowLayoutPanel コントロールにドロップします。新しい Button コントロールの Margin プロパティの値が異なるため、他のコントロールとは位置が揃いません。

別の親コントロールへの既存コントロールの再割り当て

フォームに存在するコントロールは、新しい FlowLayoutPanel コントロールに割り当てることができます。

既存のコントロールの親を変更するには

1. ツールボックスから 3 つの Button コントロールをフォームにドラッグします。これらを互いに近づけて配置しますが、整列はさせません。

2. ツールボックスの FlowLayoutPanel コントロール アイコンをクリックします。フォームにドラッグしないでください。

3. マウス ポインタを 3 つの Button コントロールに近づけます。ポインタの形が、FlowLayoutPanel コントロール アイコンの付いた十字カーソルに変わります。

4. マウス ボタンを押したままにします。

5. マウス ポインタをドラッグして、FlowLayoutPanel コントロールのアウトラインを描画します。アウトラインは、3 つの Button コントロールを囲むように描画します。

6. マウスのボタンを離します。3 つの Button コントロールが FlowLayoutPanel コントロールに挿入されます。

次の手順

レイアウト パネルとコントロールを組み合わせて使用すると、複雑なレイアウトを作成できます。次に行う作業の例を示します。

• いずれかの Button コントロールのサイズを拡大して、レイアウトの変化を確認します。

• レイアウト パネルには、別のレイアウト パネルを含めることができます。TableLayoutPanel コントロールを既存のコントロールにドロップしてみます。

• FlowLayoutPanel コントロールを親フォームにドッキングします。フォームのサイズを変更し、レイアウトの変化を確認します。

• いずれかのコントロールの Visible プロパティを false に設定し、これに呼応して FlowLayoutPanel のフローがどのように変化するか確認します。

参照

処理手順

チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置

チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置

方法 : Windows フォーム上のコントロールをドッキングする

方法 : Windows フォームにコントロールを固定する

チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト

概念

AutoSize プロパティの概要

参照

FlowLayoutPanel

TableLayoutPanel

その他の技術情報

Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1)