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

[アーティクル]
05/04/2023

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

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

TableLayoutPanel によって、その内容がグリッドに配置され、HTML <table> 要素と同じような機能が提供されます。セルは行と列に配置され、それぞれに異なるサイズを設定できます。詳細については、「 Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel」を参照してください。

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

Windows フォームプロジェクトの作成
コントロールの水平配置と垂直配置
フロー方向の変更
フロー中断の挿入
パディングと余白を使用したコントロールの配置
ツールボックスでのダブルクリックによるコントロールの挿入
アウトラインの描画によるコントロールの挿入
キャレットを使用したコントロールの挿入
別の親コントロールへの既存コントロールの再割り当て

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

プロジェクトの作成

Visual Studio で、"FlowLayoutPanelExample" という名前の Windows ベースアプリケーションプロジェクトを作成します ( [ファイル]>[新規]>[プロジェクト]>[Visual C#] または [Visual Basic]>[クラシックデスクトップ]>[Windows フォームアプリケーション] )。
フォームデザイナーでフォームを選びます。

コントロールの水平配置と垂直配置

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

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

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

FlowLayoutPanel ツールボックスからコントロールをフォームにドラッグします。
Button ツールボックスからコントロールを FlowLayoutPanelにドラッグします。このコントロールが FlowLayoutPanel コントロールの左上隅に自動的に移動されることにご注意ください。
Button ツールボックス から別の コントロールを FlowLayoutPanelにドラッグします。 Button コントロールが、最初の Button コントロールの横の位置に自動的に移動することにご注意ください。 FlowLayoutPanel が狭すぎて、2 つのコントロールが同じ行に入りきらない場合、新しい Button コントロールは次の行に自動的に移動します。
Button ツールボックス からさらにいくつかの コントロールを FlowLayoutPanelにドラッグします。次の行に折り返すまで、 Button コントロールを続けて配置します。
FlowLayoutPanel コントロールの WrapContents プロパティの値を falseに変更します。子コントロールが次の行にフローしなくなることにご注意ください。代わりに最初の行に移動してクリップされます。
FlowLayoutPanel コントロールの WrapContents プロパティの値を trueに変更します。子コントロールがまた次の行に折り返されるようになることにご注意ください。
すべての FlowLayoutPanel コントロールが最初の列に移動するまで、 Button コントロールの幅を縮小します。
すべての FlowLayoutPanel コントロールが最初の行に移動するまで、 Button コントロールの幅を拡大します。幅の拡大に対応できるように、フォームのサイズ変更が必要になる場合があります。

フロー方向の変更

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

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

FlowLayoutPanel コントロールの FlowDirection プロパティの値を TopDownに変更します。コントロールの高さに応じて、子コントロールが 1 つ以上の列に再配置されることにご注意ください。
FlowLayoutPanel のサイズを変更し、その高さを Button コントロールの列よりも小さくします。 FlowLayoutPanel が、子コントロールを次の列にフローするように再配置することにご注意ください。引き続き高さを小さくしていくと、子コントロールが次の列にフローしていくことにご注意ください。 FlowLayoutPanel コントロールの FlowDirection プロパティの値を RightToLeftに変更します。子コントロールの位置が反転することにご注意ください。 FlowDirection プロパティの値を BottomUpに変更したときのレイアウトをご確認ください。

フロー中断の挿入

FlowLayoutPanel コントロールでは、その子コントロールに FlowBreak プロパティを指定できます。 FlowBreak プロパティの値を true に設定することで、 FlowLayoutPanel コントロールを現在のフロー方向のコントロールにレイアウトすること、および次の行または列にラップすることを停止します。

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

FlowLayoutPanel コントロールの FlowDirection プロパティの値を TopDownに変更します。
左端の列の中ほどにある、 Button コントロールの 1 つを選びます。
Button コントロールの FlowBreak プロパティの値を trueに設定します。列が区切られ、選んだ Button コントロールよりも後のコントロールが次の列にフローすることにご注意ください。 Button コントロールの FlowBreak プロパティの値を false に設定すると、元の動作に戻ります。

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

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

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

FlowLayoutPanel コントロールがすべて 1 列に配置されるまで、 Button のサイズを拡大します。
1 番上にある Button コントロールを選びます。幅を拡大して、他の Button コントロールの約 2 倍の幅にします。
2 番目の Button コントロールを選びます。 Anchor プロパティの値を Rightに変更します。選択したコントロールが移動し、その右側の境界線が 1 番目の Button コントロールの右側の境界線と揃うことにご注意ください。
Anchor プロパティの値を Right および Leftに変更します。サイズが変更され、1 番目の Button コントロールと同じ幅になることにご注意ください。
3 番目の Button コントロールを選びます。 Dock プロパティの値を Fillに変更します。サイズが変更され、1 番目の Button コントロールと同じ幅になることにご注意ください。

パディングと余白を使用したコントロールの配置

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

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

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

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

FlowLayoutPanel コントロールの Dock プロパティの値を Fillに変更します。フォームの大きさが十分にある場合、 Button コントロールは FlowLayoutPanel コントロールの最初の列に移動します。
FlowLayoutPanel コントロールの Padding プロパティの値を変更します。これを行うには、 Padding [プロパティ] ウィンドウで エントリを展開し、 All プロパティを 20に設定します。詳細については、「チュートリアル: Padding、Margin、および AutoSize プロパティを使用した Windows フォームコントロールのレイアウト」を参照してください。子コントロールが FlowLayoutPanel コントロールの中央に移動することにご注意ください。 Padding プロパティの値を大きくすると、子コントロールが FlowLayoutPanel コントロールの境界から離れます。
Button 内の FlowLayoutPanel コントロールをすべて選び、 Margin プロパティの値を 20に設定します。 Button コントロール間の間隔が広がり、各コントロールが離れることにご注意ください。すべての子コントロールを表示するには、 FlowLayoutPanel コントロールのサイズを拡大する必要がある場合があります。

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

FlowLayoutPanel ツールボックス でコントロールをダブルクリックすると、コントロールに内容を挿入できます。

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

Button ツールボックスのコントロールアイコンをダブルクリックします。新しい Button コントロールが FlowLayoutPanel コントロールに表示されることにご注意ください。
ツールボックスでさらにいくつかのコントロールをダブルクリックします。新しいコントロールが FlowLayoutPanel コントロールに順次表示されることにご注意ください。

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

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

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

ツールボックスで Button コントロールアイコンをクリックします。フォームにドラッグしないでください。
FlowLayoutPanel コントロールにマウスポインターを置きます。ポインターが Button コントロールアイコンが付いた十字カーソルに変わることにご注意ください。
マウスボタンを押したままにします。
マウスポインターをドラッグして、 Button コントロールのアウトラインを描画します。適切なサイズのアウトラインを描画したら、マウスボタンを離します。 Button コントロール上の次の空き位置に FlowLayoutPanel コントロールが作成されることにご注意ください。

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

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

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

Button ツールボックスからコントロールを FlowLayoutPanel コントロールにドラッグし、2 つの Button コントロールの間の領域をポイントします。挿入バーが描画され、Button を FlowLayoutPanel コントロールにドロップしたときに配置される位置が示されることに注意してください。新しい Button コントロールを FlowLayoutPanel コントロールにドロップする前に、マウスポインターを移動して、挿入バーがどのように移動するかを確認します。
新しい Button コントロールを FlowLayoutPanel コントロールにドロップします。新しい Button コントロールの Margin プロパティの値が異なるため、他のコントロールとは位置が揃わないことにご注意ください。

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

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

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

Button [ツールボックス] から 3 つの コントロールをフォームにドラッグします。これらを互いに近づけて配置しますが、整列はさせません。
ツールボックスで FlowLayoutPanel コントロールアイコンをクリックします。フォームにドラッグしないでください。
マウスポインターを 3 つの Button コントロールに近づけます。ポインターが FlowLayoutPanel コントロールアイコンが付いた十字カーソルに変わることにご注意ください。
マウスボタンを押したままにします。
マウスポインターをドラッグして、 FlowLayoutPanel コントロールのアウトラインを描画します。 3 つの Button コントロールを囲むようにアウトラインを描画します。
マウスのボタンを離します。 3 つの Button コントロールが FlowLayoutPanel コントロールに挿入されることにご注意ください。

次の手順

レイアウトパネルとコントロールを組み合わせて使用すると、複雑なレイアウトを作成できます。さらに理解を深めるには、次の操作を行うことをお勧めします。

いずれかの Button コントロールのサイズを拡大して、レイアウトの変化を確認します。
レイアウトパネルには、別のレイアウトパネルを含めることができます。 TableLayoutPanel コントロールを既存のコントロールにドロップしてみます。
FlowLayoutPanel コントロールを親フォームにドッキングします。フォームのサイズを変更し、レイアウトの変化を確認します。
いずれかのコントロールの Visible プロパティを false に設定し、これに呼応して FlowLayoutPanel のフローがどのように変化するか確認します。