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

  • [アーティクル]

更新 : 2007 年 11 月

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

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

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

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

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

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

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

  • Windows フォーム プロジェクトの作成

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

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

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

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

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

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

  • 別の親コントロールへの既存コントロールの再割り当て

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

w4yc3e8c.alert_note(ja-jp,VS.90).gifメモ :

使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。

プロジェクトの作成

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

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

  1. "TableLayoutPanelExample" という名前の Windows アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。

  2. Windowsフォーム デザイナでフォームを選択します。

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

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

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

  1. ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。既定では、TableLayoutPanel コントロールには 4 つのセルがあります。

  2. ツールボックスから Button コントロールを TableLayoutPanel コントロールにドラッグし、セルのいずれかにドロップします。選択したセル内に Button コントロールが作成されます。

  3. さらに 3 つの Button コントロールを、ツールボックスから TableLayoutPanel コントロールにドラッグし、各セルにボタンを配置します。

  4. 2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして左に移動します。1 列目の Button コントロールの幅が縮小しますが、2 列目の Button コントロールのサイズは変更されません。

  5. 2 つの列の間にある垂直方向のサイズ変更ハンドルをドラッグして右に移動します。1 列目の Button コントロールが元のサイズに戻り、2 列目の Button コントロールが右側に移動します。

  6. 水平方向のサイズ変更ハンドルを上下に移動し、パネル内のコントロールが受ける影響を確認します。

ドッキングおよび固定を使用した、セル内のコントロールの配置

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

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

  1. 最初の Button コントロールを選択します。Dock プロパティの値を Fill に変更します。Button コントロールがセル全体に拡大します。

  2. 他の Button コントロールのいずれかを選択します。Anchor プロパティの値を Right に変更します。コントロールが移動し、その右側の境界線がセルの右側の境界線に近づきます。境界間の距離は、Button コントロールの Margin プロパティとパネルの Padding プロパティの合計値です。

  3. Button コントロールの Anchor プロパティの値を Right および Left に変更します。コントロールのサイズが、Margin 値と Padding 値を考慮して、セルの幅に変更されます。

  4. Top スタイルと Bottom スタイルを使用して、手順 2. と手順 3. を繰り返します。

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

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

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

  1. Windows フォーム デザイナで TableLayoutPanel コントロールを選択します。

  2. [プロパティ] ウィンドウで、[列] エントリの横にある省略記号ボタン (VisualStudioEllipsesButton スクリーンショット) をクリックして ColumnStyles コレクションを開きます。

  3. 最初の列を選択し、SizeType プロパティの値を AutoSize に変更します。[OK] をクリックして変更を適用します。最初の列の幅が、Button コントロールに合わせて縮小されます。また、列の幅が変更できなくなっていることも確認してください。

  4. [プロパティ] ウィンドウで、ColumnStyles コレクションを開き、最初の列を選択します。SizeType プロパティの値を Percent に変更します。[OK] をクリックして変更を適用します。TableLayoutPanel コントロールの幅を拡大すると、最初の列の幅が拡大します。TableLayoutPanel コントロールの幅を縮小すると、最初の列のボタンのサイズがセルに合わせて変更されます。また、列の幅が変更できることも確認してください。

  5. [プロパティ] ウィンドウで、ColumnStyles コレクションを開き、表示されているすべての列を選択します。すべての SizeType プロパティの値を Percent に設定します。[OK] をクリックして変更を適用します。RowStyles コレクションでも、この手順を繰り返します。

  6. 隅のサイズ変更ハンドルのいずれかをドラッグして、TableLayoutPanel コントロールの幅と高さを共に変更します。TableLayoutPanel コントロールのサイズの変化に応じて、行と列のサイズが変更されます。また、行と列は、水平方向と垂直方向のサイズ変更ハンドルを使用してサイズを変更できることも確認してください。

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

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

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

  1. 最初の列の最初の行にある Button コントロールを選択します。

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

  3. RowSpan プロパティに対して手順 2. を繰り返します。

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

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

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

  1. ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。

  2. ツールボックスの Button コントロール アイコンをダブルクリックします。TableLayoutPanel コントロールの最初のセルに新しいボタン コントロールが表示されます。

  3. ツールボックスでさらにいくつかのコントロールを ダブルクリックします。新しいコントロールが TableLayoutPanel コントロールの未使用のセルに順次表示されます。また、空のセルがない場合は、新しいコントロールを格納するために TableLayoutPanel コントロールが拡大します。

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

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

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

  1. TableLayoutPanel コントロールに空のセルがある場合は、TableLayoutPanel コントロールがいっぱいになるまで、新しい Button コントロールを挿入していきます。

  2. TableLayoutPanel コントロールがいっぱいになったら、ツールボックスの Button アイコンをダブルクリックして、新しい Button コントロールを挿入します。TableLayoutPanel コントロールでは、新しいコントロールを格納する新しいセルが作成されます。コントロールをさらにいくつか挿入し、サイズ変更動作を確認します。

  3. TableLayoutPanel コントロールの GrowStyle プロパティの値を FixedSize に変更します。TableLayoutPanel コントロールがいっぱいになるまで、ツールボックスの Button アイコンをダブルクリックして、Button コントロールを挿入します。ツールボックスの Button アイコンを再度ダブルクリックします。追加の行と列を作成できないというエラー メッセージが Windows フォーム デザイナによって表示されます。

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

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

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

  1. ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。

  2. ツールボックスの Button コントロール アイコンをクリックします。フォームにドラッグしないでください。

  3. TableLayoutPanel コントロールにマウス ポインタを置きます。ポインタが Button コントロール アイコンが付いた十字カーソルに変わります。

  4. マウス ボタンを押したままにします。

  5. マウス ポインタをドラッグして、Button コントロールのアウトラインを描画します。適切なサイズのアウトラインを描画したら、マウス ボタンを離します。コントロールのアウトラインを描画したセルに Button コントロールが作成されます。

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

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

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

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

コントロールの交換

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

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

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

次の手順

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

  • いずれかの Button コントロールのサイズを変更して、レイアウトの変化を確認します。

  • 選択した複数のコントロールを TableLayoutPanel コントロールに貼り付け、それらがどのように挿入されるかを確認します。

  • レイアウト パネルには、別のレイアウト パネルを含めることができます。TableLayoutPanel コントロールを既存のコントロールにドロップしてみます。

  • TableLayoutPanel コントロールを親フォームにドッキングします。フォームのサイズを変更し、レイアウトの変化を確認します。

参照

処理手順

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

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

チュートリアル : データ入力用のサイズ変更可能な Windows フォームの作成

チュートリアル : ローカライズの際に均等に調整されるレイアウトの作成

方法 : Windows フォーム上のコントロールをドッキングする

方法 : Windows フォームにコントロールを固定する

チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト

概念

TableLayoutPanel コントロールの推奨される手順

AutoSize プロパティの概要

参照

FlowLayoutPanel

TableLayoutPanel