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

2025-05-07

一部のアプリケーションでは、フォームのサイズが変更されたり、コンテンツのサイズが変わると適切に配置されるレイアウトを含むフォームが必要です。動的レイアウトが必要で、コードで Layout イベントを明示的に処理しない場合は、レイアウトパネルの使用を検討してください。

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

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

TableLayoutPanel は、その内容をグリッド内に配置し、HTML <テーブル> 要素と同様の機能を提供します。 TableLayoutPanel コントロールを使用すると、個々のコントロールの位置を正確に指定しなくても、グリッドレイアウトにコントロールを配置できます。そのセルは行と列に配置され、サイズが異なる場合があります。セルは、行と列の間で結合できます。セルには、フォームに含めることができるものや、他のほとんどの点でコンテナーとして動作するものを含めることができます。

TableLayoutPanel コントロールは実行時にプロポーショナルサイズ変更機能も提供するため、フォームのサイズ変更に合わせてレイアウトをスムーズに変更できます。これにより、 TableLayoutPanel コントロールは、データ入力フォームやローカライズされたアプリケーションなどの目的に適しています。詳細については、「チュートリアル: データ入力用のサイズ変更可能な Windows フォームの作成」および「チュートリアル: ローカライズ可能な Windows フォームの作成」を参照してください。

一般に、レイアウト全体のコンテナーとして TableLayoutPanel コントロールを使用しないでください。 TableLayoutPanel コントロールを使用して、レイアウトの一部に比例したサイズ変更機能を提供します。

このチュートリアルで説明するタスクは次のとおりです。

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

完了すると、これらの重要なレイアウト機能によって果たされる役割を理解できるようになります。

プロジェクトの作成

最初の手順では、プロジェクトを作成し、フォームを設定します。

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

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

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

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

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

TableLayoutPanel からフォームにコントロールをドラッグします。既定では、 TableLayoutPanel コントロールには 4 つのセルがあることに注意してください。
ButtonからコントロールにTableLayoutPanel コントロールをドラッグし、いずれかのセルにドロップします。 Button コントロールは、選択したセル内に作成されることに注意してください。
Buttonからコントロールにさらに 3 つのTableLayoutPanel コントロールをドラッグし、各セルにボタンが含まれるようにします。
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 コレクションを使用して、行と列の個々のプロパティを設定できます。

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

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

行と列のスパンをコントロールする

TableLayoutPanel コントロールは、デザイン時にいくつかの新しいプロパティをコントロールに追加します。これらのプロパティのうち、 RowSpan と ColumnSpanの 2 つがあります。これらのプロパティを使用して、複数の行または列にまたがるコントロールを作成できます。

コントロールを使用して行と列をまたがすには

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

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

TableLayoutPanelのコントロールをダブルクリックすることで、コントロールにデータを入力できます。

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

TableLayoutPanel からフォームにコントロールをドラッグします。
Buttonのコントロールアイコンをダブルクリックします。 TableLayoutPanel コントロールの最初のセルに新しいボタンコントロールが表示されることに注意してください。
ツールボックスで、さらに複数のコントロールをダブルクリックします。新しいコントロールは、 TableLayoutPanel コントロールの空きセルに連続して表示されることに注意してください。また、開いているセルが使用できない場合は、 TableLayoutPanel コントロールが新しいコントロールに合わせて展開されることにも注意してください。

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

TableLayoutPanel コントロールにコントロールを挿入すると、新しいコントロールの空のセルが不足する可能性があります。 TableLayoutPanel コントロールは、セルの数を増やすことで、この状況を自動的に処理します。

オーバーフローの自動処理を観察するには

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

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

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

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

TableLayoutPanel からフォームにコントロールをドラッグします。
[ツールボックス]で、Button コントロールアイコンをクリックします。フォームにドラッグしないでください。
マウスポインターを TableLayoutPanel コントロールの上に移動します。ポインターが十字線に変わり、Button コントロールアイコンがアタッチされていることに注意してください。
マウスボタンをクリックしたままにします。
マウスポインターをドラッグして、Button コントロールのアウトラインを描画します。サイズに問題がなければ、マウスボタンを離します。 Button コントロールは、コントロールのアウトラインを描画したセルに作成されることに注意してください。

セル内の複数のコントロールは許可されていません

TableLayoutPanel コントロールには、セルごとに 1 つの子コントロールのみを含めることができます。

セル内の複数のコントロールが許可されていないことを示す

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

コントロールの入れ替え

TableLayoutPanel コントロールを使用すると、2 つの異なるセルを占有するコントロールをスワップできます。

コントロールを交換するには

Button コントロールの 1 つを占有されたセルからドラッグし、別の占有されたセルにドロップします。 2 つのコントロールは、1 つのセルから他方のセルに移動されることに注意してください。

次のステップ

レイアウトパネルとコントロールの組み合わせを使用して、複雑なレイアウトを実現できます。その他の探索に関する推奨事項は次のとおりです。

Button コントロールのサイズを大きくして、レイアウトへの影響を確認してください。
複数のコントロールの選択範囲を TableLayoutPanel コントロールに貼り付け、コントロールがどのように挿入されるかを確認します。
レイアウトパネルには、他のレイアウトパネルを含めることができます。 TableLayoutPanel コントロールを既存のコントロールにドロップして実験します。
TableLayoutPanel コントロールを親フォームにドッキングします。フォームのサイズを変更し、レイアウトに対する効果をメモします。