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

[アーティクル]
08/09/2011

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

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

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

TableLayoutPanel は、その内容をグリッドに配置し、HTML <table> 要素と同じような機能を提供します。 TableLayoutPanel コントロールでは、コントロールをグリッドレイアウトに配置でき、個々のコントロールの位置を正確に指定する必要がありません。このレイアウトパネルのセルは行と列に配置され、それぞれ異なったサイズを設定できます。セルは、行や列にまたがって結合できます。セルには、フォームに配置できるすべての要素を格納できる他、ほとんどの点でコンテナーとして動作します。

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

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

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

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

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

注意

実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「設定の操作」を参照してください。

プロジェクトの作成

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

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

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

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

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

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

ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。既定では、TableLayoutPanel コントロールには 4 つのセルがあります。
ツールボックスから Button コントロールを TableLayoutPanel コントロールにドラッグし、セルのいずれかにドロップします。選択したセル内に Button コントロールが作成されます。
さらに 3 つの Button コントロールを、ツールボックスから TableLayoutPanel コントロールにドラッグし、各セルにボタンを配置します。
2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして左に移動します。 1 列目の Button コントロールの幅が縮小しますが、2 列目の Button コントロールのサイズは変更されません。
2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして右に移動します。 1 列目の 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 コレクションでも、この手順を繰り返します。
隅のサイズ変更ハンドルのいずれかをドラッグして、TableLayoutPanel コントロールの幅と高さを共に変更します。 TableLayoutPanel コントロールのサイズの変化に応じて、行と列のサイズが変更されます。また、行と列は、水平方向と垂直方向のサイズ変更ハンドルを使用してサイズを変更できることも確認してください。

複数行および複数列へのコントロールの拡大

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

コントロールを複数の行と列に拡大するには

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

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

ツールボックスでコントロールをダブルクリックすることにより、そのコントロールを TableLayoutPanel コントロールに挿入できます。

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

ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。
ツールボックスの Button コントロールアイコンをダブルクリックします。 TableLayoutPanel コントロールの最初のセルに新しいボタンコントロールが表示されます。
ツールボックスでさらにいくつかのコントロールをダブルクリックします。新しいコントロールが TableLayoutPanel コントロールの未使用のセルに順次表示されます。また、空のセルがない場合は、新しいコントロールを格納するために TableLayoutPanel コントロールが拡大します。

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

TableLayoutPanel コントロールにコントロールを挿入していくと、新しいコントロールを挿入する空のセルがなくなることがあります。 TableLayoutPanel コントロールは、セルの数を増やすことによってこのような状況に自動的に対処します。

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

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

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

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

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

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

1 つのセルに配置できるコントロールの数

TableLayoutPanel コントロールでは、セルごとに 1 つの子コントロールしか配置できません。

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

ツールボックスから Button コントロールを TableLayoutPanel コントロールにドラッグし、割り当て済みのセルのいずれかにドロップします。 TableLayoutPanel コントロールでは、割り当て済みのセルに Button コントロールをドロップできないことを確認してください。

コントロールの交換

TableLayoutPanel コントロールでは、2 つの別個のセルに割り当てられているコントロールを交換できます。

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

割り当て済みのセルからいずれかの Button コントロールをドラッグし、別の割り当て済みセルにドロップします。 2 つのコントロールがそれぞれ他方のセルに移動します。

次の手順

レイアウトパネルとコントロールを組み合わせて使用すると、複雑なレイアウトを作成できます。次に行う作業の例を示します。

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

参照

次の方法で共有