FlowLayoutPanelを利用したUI作成を紹介します。

FlowLayoutPanel

FlowLayotPanelを利用すると、コントロールを等間隔に配置できます。パネルの幅をはみ出す場合は、折り返され最初に配置したコントロールの下部に自動で配置されます。

プログラム例

Visual Studioを起動し、Windows Formアプリケーションを作成します。作成後フォームを開いてフォームデザイナを表示します。(下図)


左側の[ツールボックス]ウィンドウの[コンテナー]ノード内の[FlowLayoutPanel]コントロールをクリックして選択します。(下図)
選択した[FlowLayoutPanel]の項目をドラッグしてフォームデザイナのフォーム上にドロップします。


フォーム上にFlowLayoutPanelコントロールが配置されました。


コントロールのハンドルをドラッグして、FlowLayoutPanelの大きさを変更し、フォームにちょうど収まるサイズに変更します。




続いてFlowLayoutPanel内にコントロールを配置します。ツールボックスウィンドウでTextBoxコントロールをクリックして選択します。選択したTextBoxコントロールをドラッグして、FlowLayoutPanel内にドロップします。


FlowLayoutPanelの左上にTextBoxが配置されます。


同じ手順でTextBoxをもう一つFlowLayoutPanel内に配置します。最初に配置したテキストボックスの右隣にTextBoxが配置されます。

同じ手順でButtonコントロールを配置します。2個配置したテキストボックスの右隣に配置されます。


FlowLayoutPanel内に配置されたコントロールは自動で整列されて配置されます。


コントロールを追加し続けて、FlowLayoutPanelの幅を超えると、コントロールが折り返され、最初に配置したコントロールの下部に配置されます。


FlowLayoutPanelの幅を変更してみます。コントロールの配置が折り返されている動作が確認できます。


プロジェクトを実行します。下図のウィンドウが表示されます。


FlowLayoutPanelを利用して画面を作成できました。