TableLayoutPanelを利用について紹介します。

TableLayoutPanel

TableLayoutPanelを利用すると、コントロールを行、列の形式で等間隔に配置することが簡単にできます。

プログラム例

TableLayoutPanelの配置

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


ウィンドウ左側の[ツールボックス]ウィンドウから[コンテナー]ノード内のTableLayoutPanelコントロールをクリックして選択します。


選択したTableLayoutPanelコントロールをドラッグし、フォームデザイナのフォームにドロップします。フォームデザイナのフォームにTableLayoutPanelが配置されます。(下図)

TableLayoutPanelコントロールのハンドルを操作して、TableLayoutPanelをフォームの大きさに揃えます。

TableLayoutPanelの行の追加

TableLayoutPanelをクリックして選択します。選択後コントロールの右上の[▶]ボタンをクリックします。下図の[TableLayoutPanel タスク]のメニューが表示されます。表示されたメニューの[行の追加]をクリックします。


[TableLayoutPanel タスク]のメニューで[行の追加]をクリックするとTableLayoutに新しい列が追加されます。

TableLayoutPanelを選択し右下の[プロパティ]ウィンドウの、[Rows]の項目の[...]ボタンをクリックします。


下図の[列と行のスタイル]ダイアログが表示されます。


[Row1]の項目をクリックして選択します。選択状態で右側のエリアの[サイズの型]セクションの[絶対サイズ]のラジオボタンをクリックしてチェックを付けます。また、ラジオボタンの右側のテキストボックスに20の値を設定します。


[Row2]も同じ設定にします。設定ができたら[OK]ボタンをクリックしてダイアログを閉じます。


フォームデザイナが下図の画面になります。行の高さが20ピクセルで設定されます。


20ピクセルではコントロールの高さを考慮すると狭いため、再度[列と行のスタイル]ダイアログを表示し、高さを32ピクセルに変更します。


変更後の画面は下図となります。TableLayoutPanelの行の高さが広くなっていることが、確認できます。

TableLayoutPanelへのコントロールの配置

TableLayoutPanel内にコントロールを配置していきます。[ツールボックス]ウィンドウから[Label]コントロールをクリックして選択します。選択したLabelコントロールをドラッグし、TableTLayoutPanelのコントロールを配置したいセルにドロップします。下図はLabelコントロールをTableLayoutPanelコントロールの左上のセルにドロップした時の状態です。


同様の手順で一番左の列のセルにLabelを配置します。


さらに同様の手順で右側の列に、TextBoxを配置します。


コントロールの配置ができました。コントロールを等間隔で簡単に配置できます

実行結果

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