TableLayoutPanelを利用する

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

TableLayoutPanel

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

プログラム例

TableLayoutPanelの配置

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

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

選択したTableLayoutPanelコントロールをドラッグし、フォームデザイナのフォームにドロップします。フォームデザイナのフォームにTableLayoutPanelが配置されます。(下図)
TableLayoutPanelを利用する:画像3
TableLayoutPanelコントロールのハンドルを操作して、TableLayoutPanelをフォームの大きさに揃えます。
TableLayoutPanelを利用する:画像4

TableLayoutPanelの行の追加

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

[TableLayoutPanel タスク]のメニューで[行の追加]をクリックするとTableLayoutに新しい列が追加されます。
TableLayoutPanelを利用する:画像6
TableLayoutPanelを選択し右下の[プロパティ]ウィンドウの、[Rows]の項目の[...]ボタンをクリックします。
TableLayoutPanelを利用する:画像7

下図の[列と行のスタイル]ダイアログが表示されます。
TableLayoutPanelを利用する:画像8

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

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

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

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

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

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

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

同様の手順で一番左の列のセルにLabelを配置します。
TableLayoutPanelを利用する:画像15

さらに同様の手順で右側の列に、TextBoxを配置します。
TableLayoutPanelを利用する:画像16

コントロールの配置ができました。コントロールを等間隔で簡単に配置できます
TableLayoutPanelを利用する:画像17

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。
TableLayoutPanelを利用する:画像18
AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2018-04-23
Copyright © 1995–2025 iPentec all rights reserverd.