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

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

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

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

FlowLayoutPanel はその内容を特定のフローの方向 (水平または垂直) に配置します。ある行から次の行、またはある列から次の列に内容をラップすることができます。また、ラップする代わりにクリップすることもできます。詳細については、「チュートリアル: FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。

TableLayoutPanel によって、その内容がグリッドに配置され、HTML <table> 要素と同じような機能が提供されます。 TableLayoutPanel コントロールでは、コントロールをグリッドレイアウトで配置でき、各コントロールの位置を正確に指定する必要がありません。セルは行と列に配置され、それぞれに異なるサイズを設定できます。複数の行と列にわたってセルをマージすることもできます。セルには、フォームに含めることができるものであれば何でも含めることができます。また、その他のほとんどの点で、セルはコンテナーと同様に動作します。

TableLayoutPanel コントロールは、実行時に縦横比を維持してサイズ変更することもできるので、フォームのサイズが変更されたときに、レイアウトをスムーズに変化させることができます。そのため、TableLayoutPanel はデータ入力フォームやローカライズ対応アプリケーションなどの目的に適したコントロールだと言えます。詳細については、「チュートリアル: データ入力用のサイズ変更可能な Windows フォームの作成」および「チュートリアル: ローカライズ可能な Windows フォームの作成」を参照してください。

通常、TableLayoutPanel コントロールをレイアウト全体のコンテナーとして使用することは避けてください。 TableLayoutPanel コントロールは、レイアウトの一部に、縦横比を維持したサイズ変更機能を提供する目的で使用してください。

このチュートリアルでは、以下のタスクを行います。

Windows フォームプロジェクトの作成
行と列でのコントロールの配置
行と列のプロパティの設定
複数の行と列にわたるコントロールの配置
オーバーフローの自動処理
ツールボックスでのダブルクリックによるコントロールの挿入
アウトラインの描画によるコントロールの挿入
別の親コントロールへの既存コントロールの再割り当て

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

プロジェクトの作成

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

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

"TableLayoutPanelExample" という名前の Windows アプリケーションプロジェクトを作成します。詳細については、「方法: Windows フォームアプリケーションプロジェクトを作成する」を参照してください。
Windowsフォームデザイナーで、フォームを選択します。

行と列でのコントロールの配置

TableLayoutPanel コントロールを使用すると、コントロールを行と列に簡単に配置できます。

TableLayoutPanel を使用してコントロールを行と列に配置するには

TableLayoutPanel ツールボックスからコントロールをフォームにドラッグします。既定では、TableLayoutPanel コントロールには 4 つのセルがあります。
Button コントロールをツールボックスから TableLayoutPanel コントロールにドラッグして、いずれかのセルにドロップします。選択したセル内に Button コントロールが作成されることに注意してください。
さらに 3 つ Button のコントロールをツールボックスから TableLayoutPanel コントロールにドラッグして、各セルに 1 つずつボタンを含めます。
2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして、左に移動させます。最初の列にある Button コントロールがサイズ変更されて幅が小さくなり、2 番目の列にある Button コントロールはサイズ変更されないことに注意してください。
2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして、右に移動させます。最初の列にある Button コントロールが元のサイズに戻り、2 番目の列にある Button コントロールは右に移動することに注意してください。
水平方向のサイズ変更ハンドルを上下に移動して、パネル内のコントロールに対する効果を確認します。

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

TableLayoutPanel での子コントロールの固定動作は、他のコンテナーコントロールの動作と異なります。子コントロールのドッキング動作は、他のコンテナーコントロールと同じです。

セル内でのコントロールの配置

最初の Button コントロールを選択します。 Dock プロパティの値を Fillに変更します。 Button コントロールがセルを埋めるように拡張されることに注意してください。
他のいずれかの Button コントロールを選択します。 Anchor プロパティの値を Rightに変更します。右側の境界線が、セルの右罫線の近くに移動されることに注意してください。境界線の間の距離は、Button コントロールの Margin プロパティとパネルの Padding プロパティの合計です。
Button コントロールの Anchor プロパティの値を Right と Left に変更します。コントロールのサイズがセルの幅に合わせて調整されることと、Margin および Padding の値が考慮されていることに注意してください。
Top と Bottom のスタイルについて、手順 2 と 3 を繰り返します。

行と列のプロパティの設定

RowStyles コレクションと ColumnStyles コレクションを使用すると、行と列の個々のプロパティを設定できます。

行と列のプロパティを設定するには

Windows フォームデザイナーで、TableLayoutPanel コントロールを選択します。
プロパティ ウィンドウで、[列] エントリの横にある省略記号 () ボタンをクリックすると、ColumnStyles コレクションが開きます。
最初の列を選択し、その SizeType プロパティの値を AutoSize に変更します。 [OK] をクリックして変更を確定します。最初の列の幅が、Button コントロールに合わせて小さくなることに注意してください。また、列の幅がサイズ変更できなくなっていることにも注意してください。
[プロパティ] ウィンドウで、ColumnStyles コレクションを開き、最初の列を選択します。 SizeType プロパティの値を Percentに変更します。 [OK] をクリックして変更を確定します。 TableLayoutPanel コントロールの幅を大きくして、最初の列の幅が拡大されることを確認します。 TableLayoutPanel コントロールの幅を小さくして、最初の列のボタンがセルに合わせてサイズ変更されることを確認します。また、列の幅がサイズ変更可能になっていることにも注意してください。
[プロパティ] ウィンドウで、ColumnStyles コレクションを開き、一覧にあるすべての列を選択します。すべての SizeType プロパティの値を Percent に設定します。 [OK] をクリックして変更を確定します。 RowStyles コレクションについても、これを繰り返します。
角にあるサイズ変更ハンドルの 1 つをドラッグして、TableLayoutPanel コントロールの幅と高さの両方を調整します。 TableLayoutPanel コントロールのサイズが変更されると、行と列のサイズも変更されることに注意してください。また、行と列が、水平方向と垂直方向のサイズ変更ハンドルでサイズ変更可能になっていることにも注意してください。

複数の行と列にわたるコントロールの配置

TableLayoutPanel コントロールを使用すると、デザイン時に、いくつかの新しいプロパティをコントロールに追加できます。それらのプロパティのうちの 2 つが、RowSpan と ColumnSpan です。これらのプロパティを使用すると、1 つのコントロールを複数の行や列にまたがって表示させることができます。

コントロールを複数の行や列にまたがって配置するには

1 行目の 1 列目にある Button コントロールを選択します。
[プロパティ] ウィンドウで、ColumnSpan プロパティの値を 2 に変更します。 Button コントロールが、1 列目と 2 列目にまたがって配置されることに注意してください。また、この変更に対応するために、行が追加されていることにも注意してください。
RowSpan プロパティについて、手順 2 を繰り返します。

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

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

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

TableLayoutPanel ツールボックスからコントロールをフォームにドラッグします。
Button ツールボックスのコントロールアイコンをダブルクリックします。 TableLayoutPanel コントロールの最初のセルに新しいボタンコントロールが表示されることに注意してください。
ツールボックスでさらにいくつかのコントロールをダブルクリックします。新しいコントロールが、TableLayoutPanel コントロールの空いているセルに順次表示されることに注意してください。また、開いているセルがない場合には、新しいコントロールを表示できるように TableLayoutPanel コントロールが拡張されることにも注意してください。

オーバーフローの自動処理

TableLayoutPanel コントロールにコントロールを挿入する際には、新しいコントロールを配置するための空のセルが足りない場合もあります。 TableLayoutPanel コントロールでは、セルの数を増やすことで、この状況への対処が自動的に行われます。

オーバーフローの自動処理を確認するには

TableLayoutPanel コントロールに空のセルが残っている場合は、TableLayoutPanel コントロールがいっぱいになるまで、新しい Button コントロールを挿入し続けます。
TableLayoutPanel コントロールがいっぱいになったら、ツールボックスの Button アイコンをダブルクリックして、Button コントロールをもう 1 つ挿入します。 TableLayoutPanel コントロールで、新しいコントロールを表示するために、新しいセルが作成されることに注意してください。さらにいくつかのコントロールを挿入し、サイズ変更動作を確認します。
TableLayoutPanel コントロールの GrowStyle プロパティの値を FixedSizeに変更します。 ツールボックスの Button アイコンをダブルクリックして、TableLayoutPanel コントロールがいっぱいになるまで Buttonコントロールを挿入していきます。 ツールボックスの Button アイコンをもう一度ダブルクリックします。追加の行と列を作成できないことを知らせるエラーメッセージが、Windows フォームデザイナーによって表示されます。

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

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

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

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

セル内に複数のコントロールを配置することはできない

TableLayoutPanel コントロールでは、セルごとに 1 つの子コントロールしか含めることができません。

セル内に複数のコントロールを配置できないことを確認するには

Button コントロールをツールボックスから TableLayoutPanel コントロールにドラッグして、空いていないセルのいずれかにドロップします。 TableLayoutPanel コントロールでは、空いていないセルに Button コントロールをドロップすることはできないことに注意してください。

コントロールの入れ替え

TableLayoutPanel コントロールを使用すると、2 つの異なるセルに配置されているコントロールを入れ替えることができます。

コントロールを入れ替えるには

空いていないセルから Button コントロールの 1 つをドラッグし、もう 1 つの空いていないセルにドロップします。 2 つのコントロールが、一方のセルから他方のセルに移動されることに注意してください。

次の手順

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

いずれかの Button コントロールのサイズを拡大して、レイアウトの変化を確認します。
複数のコントロールを選択して TableLayoutPanel コントロールに貼り付け、それらのコントロールがどのように挿入されるかを確認します。
レイアウトパネルには、別のレイアウトパネルを含めることができます。 TableLayoutPanel コントロールを既存のコントロールにドロップしてみます。
TableLayoutPanel コントロールを親フォームにドッキングします。フォームのサイズを変更し、レイアウトの変化を確認します。