DOBON.NET

TableLayoutPanelコントロールを使って、コントロールを表形式で整列させる

注意:TableLayoutPanelコントロールは.NET Framework 2.0以降でのみ使用できます。

TableLayoutPanelコントロールとは?

TableLayoutPanelコントロールは、まるでHTMLのTABLEタグのようなコントロールと言えば分かりやすいでしょうか。複数のコントロールを表形式で整列させることができます。特に、並べたコントロールのサイズや、表示、非表示を変更してもそれに合わせて自動的に整列させたい場合に使用すると便利です(コントロールを縦、あるいは横方向に並べたい場合は、FlowLayoutPanelコントロールが適しています)。

例えば下の画像はMSDNの「方法 : データ入力用のサイズ変更可能な Windows フォームを作成する」で紹介されている使用例ですが、「First Name」や「Address」などの項目名を日本語にしてLabelコントロールの長さが変わってしまったとしても、コントロールはきれいに自動で整列します。このように、ローカリゼーションによってコントロールの大きさが変わっても対応できます。

TableLayoutPanelコントロールを使った例

Visual Studioのフォームデザイナによる簡単な使い方

使い方は簡単で、フォームにTableLayoutPanelコントロールを配置して、セルにコントロールを配置するだけです。1つのセルには1つのコントロールしか置けません。セルにPanelコントロールを配置し、そこに複数のコントロールを配置することはできます。

コードでコントロールを追加する方法は、「TableLayoutPanelに動的にコントロールを追加する」で説明します。

列数、行数を変更する

テーブルの列の数は、TableLayoutPanel.ColumnCountプロパティで変更できます。行の数は、TableLayoutPanel.RowCountプロパティです。

指定した位置に列や行を挿入したり、削除するには、フォームデザイナのTableLayoutPanel上で右クリックして、コンテキストメニューを表示させます。メニューに「列」や「行」の項目があり、その下に「追加」「挿入」「削除」があります。「挿入」は、右クリックした位置の前に挿入します。「追加」は、最終列、最終行に追加します。

TableLayoutPanelのコンテキストメニュー

または、フォームデザイナでTableLayoutPanelを選択した時にプロパティウィンドウの下に表示される「列の追加」「行の追加」「最終列の削除」「最終行の削除」をクリックして変更することもできます。

さらには、プロパティウィンドウのColumnsプロパティやRowsプロパティを変更しようとすると表示される「列と行のスタイル」ダイアログを使って変更することもできます。このダイアログは、プロパティウィンドウの下に表示される「行および列の編集...」をクリックしても表示できます。

「列と行のスタイル」ダイアログ

コードで行う方法は、「TableLayoutPanelの行数や列数を取得、変更する」や「TableLayoutPanelの行や列を挿入する」や「TableLayoutPanelの行や列を削除する」で説明します。

列、行の幅を変更する

フォームデザイナでセルの境界線をドラッグ&ドロップで移動させることができます。ただ、大雑把にしか指定できません。

上で紹介したTableLayoutPanelのコンテキストメニューや、「列と行のスタイル」ダイアログを使うと、詳細に列と行の幅を変更することができます。

コードで変更する方法は、「TableLayoutPanelの行や列の幅を変更する」で説明します。

セルを拡張する

あるセルを横に拡張する(あるセルにあるコントロールが隣のセルにまたがるようにする)には、そのセルにあるコントロールのColumnSpanプロパティを2にします。同様に下に拡張する(下のセルにまたがるようにする)には、コントロールのRowSpanプロパティを2にします。

ただしこれらのプロパティは、Visual Studioのフォームデザイナを使った時しか使用できません。コードで行う方法は、「TableLayoutPanelのセルの行や列を拡大する」で説明します。

セル内のコントロールの配置方法を変更する

セル内のコントロールは、AnchorプロパティまたはDockプロパティによって配置方法を指定することができます。通常のAnchorとDockプロパティは、親コントロール全体の領域に対してコントロールをどのように固定するかを示していますが、TableLayoutPanelの子コントロールのAnchorとDockプロパティは、セルの領域の上下左右(あるいは真ん中)のどこに配置するかを示します。

AnchorプロパティとDockプロパティによってコントロールがどのように配置されるかを以下の画像でご確認ください。

TableLayoutPanelの子コントロールのAnchorとDockプロパティ

また、後ほど紹介するサンプル「TableLayoutPanel1.exe」を使ってもご確認いただけます。

TableLayoutPanelを使用する際のガイドライン

MSDNの「TableLayoutPanel コントロールの推奨される手順」では、TableLayoutPanelコントロールをどのようなケースで使用し、どのようなケースでは使用すべきではないかが説明されています。

これによると、親フォームのサイズ変更や、ローカリゼーションに伴いコントロールに表示するテキストの長さが変更されるようなケースでTableLayoutPanelコントロールを使うのが有効であるということです。

逆に推奨されない、避けるべきとされているのは、TableLayoutPanelコントロールのDockプロパティをFillにする、TableLayoutPanelに別のTableLayoutPanelを配置して入れ子にする、TableLayoutPanelを配置したフォームを継承したフォームでさらにコントロールを追加する、列がレベルとテキストの2つしかない単純なフォームで使用するなどです。

補足:MSDN内の説明やサンプルにもこれらの推奨事項に反するものが見られます。例えば、「TableLayoutPanel クラス」にあるTableLayoutPanelの説明に「任意の Windows フォーム コントロールを TableLayoutPanel コントロールの子にできます。これは、 TableLayoutPanel の他のインスタンスを含みます。 これにより、実行時の変更に合わせた高度なレイアウトを構築できます。」とありますが、TableLayoutPanelを入れ子にしないという「TableLayoutPanel コントロールの推奨される手順」の記述と矛盾しています。

サンプル

TableLayoutPanelコントロールの実際の挙動を確かめるためのサンプル(TableLayoutPanel1.exe)を用意しました。

TableLayoutPanelコントロール

  • 履歴:
  • 2012/02/11 大幅な書きなおし。

注意:この記事では、基本的な事柄の説明が省略されているかもしれません。初心者の方は、特に以下の点にご注意ください。

  • .NET Tipsをご利用いただく際は、注意事項をお守りください。
共有する

この記事への評価

この記事へのコメント

この記事に関するコメントを投稿するには、下のボタンをクリックしてください。投稿フォームへ移動します。通常のご質問、ご意見等は掲示板へご投稿ください。