手順 4: TableLayoutPanel コントロールを使用したフォームのレイアウトの設定

この手順では、フォームに TableLayoutPanel コントロールを追加します。

このトピックのビデオ版については " " を参照してください。

TableLayoutPanel コントロールを使用してフォームのレイアウトを設定するには

1. Windows フォーム デザイナーに移動します。フォームの左側にある [ツールボックス] タブを見つけ、そのタブをポイントします。[ツールボックス] タブをポイントしている間、ツールボックスが表示されます (または、[表示] メニューの [ツールボックス] をクリックします)。

2. 次の図に示すように、[コンテナー] グループの横にある正符号をクリックして、このグループを開きます。

   [コンテナー] グループ

   

3. ボタン、チェック ボックス、ラベルなどのコントロールをフォームに追加できます。ツールボックスの TableLayoutPanel コントロールをダブルクリックします。次の図に示すように、TableLayoutPanel コントロールがフォームに追加されます。

   TableLayoutPanel コントロール

   

   [!メモ]

   TableLayoutPanel を追加した後、[TableLayoutPanel タスク] というタイトルのウィンドウがフォーム内に表示された場合は、フォーム内の任意の場所をクリックしてそのウィンドウを閉じます。このウィンドウについては、このチュートリアルで後ほど詳しく説明します。

   [!メモ]

   ツールボックスは、タブをクリックするとフォームの前面に展開され、ツールボックスの外部をクリックすると閉じます。これは、IDE の自動非表示機能です。ウィンドウの右上隅にあるプッシュピン アイコンをクリックすると、すべてのウィンドウについてこの機能のオンとオフを切り替えることができます。このアイコンをクリックするたびに、自動非表示になるか位置が固定されるかが切り替わります。プッシュピン アイコンは次のように表示されます。

   プッシュピン アイコン

   

4. TableLayoutPanel をクリックして選択します。どのコントロールが選択されているかを確認するには、次の図のような、[プロパティ] ウィンドウの上部にあるドロップダウン リストを確認します。

   TableLayoutPanel コントロールが表示された [プロパティ] ウィンドウ

   

5. コントロール セレクターは、[プロパティ] ウィンドウの上部にあるドロップダウン リストです。この例では、tableLayoutPanel1 というコントロールが選択されています。コントロールを選択するには、Windows フォーム デザイナーでクリックするか、コントロール セレクターから選択します。TableLayoutPanel が選択されているので、Dock プロパティを探し、[Dock] をクリックします (None に設定されています)。値の横にドロップダウン矢印が表示されます。次の図に示すように、矢印をクリックし、[Fill] ボタン (中央にある大きいボタン) を選択します。

   [Fill] が選択された [プロパティ] ウィンドウ

   

6. TableLayoutPanel の Dock プロパティを Fill に設定すると、パネルがフォーム全体に表示されます。この後にフォームのサイズを変更した場合、TableLayoutPanel はドッキングされたまま、フォームに合わせてサイズが変更されます。

   [!メモ]

   TableLayoutPanel は、Microsoft Office Word の表に似ています。行と列があり、個々のセルは複数の行および列にまたがることができます。各セルでは、1 つのコントロール (ボタン、チェック ボックス、ラベルなど) を保持できます。ここでは、TableLayoutPanel の上の行に行全体にまたがる PictureBox コントロールを配置し、左下のセルに CheckBox コントロールを配置し、右下のセルに 4 つの Button コントロールを配置します。

   [!メモ]

   既に説明したように、各セルで保持できるコントロールは 1 つだけですが、右下のセルには Button コントロールが 4 つ含まれています。これが可能なのは、他のコントロールを保持するコントロールをセルに配置できるからです。このようなコントロールをコンテナーと呼び、TableLayoutPanel はコンテナーの 1 つです。これについては、このチュートリアルで後ほど詳しく説明します。

7. 現在、TableLayoutPanel には 2 つの行と 2 つの列がありますが、いずれもサイズは同じになっています。上の行と右の列のサイズがそれぞれ他方よりもかなり大きくなるように変更する必要があります。Windows フォーム デザイナーで、TableLayoutPanel を選択します。右上隅に、次のような小さな黒い三角形のボタンが表示されます。

   三角形のボタン

   

   このボタンは、コントロールのプロパティを自動的に設定するのに役立つタスクがあることを示しています。

8. 三角形をクリックします。次の図に示すように、コントロールのタスク一覧が表示されます。

   TableLayoutPanel タスク

   

9. [行および列の編集] タスクをクリックして、[列と行のスタイル] ウィンドウを表示します。[Column1] をクリックし、サイズを 15% に設定します。設定するには、[パーセント] ボタンが選択されていることを確認し、[パーセント] ボックスに「15」と入力します (これは、この後の別のチュートリアルで使用する NumericUpDown コントロールです)。[Column2] をクリックし、85% に設定します。ウィンドウが閉じてしまうため、まだ [OK] ボタンはクリックしないでください (クリックした場合は、タスク一覧を使用して再度開くことができます)。

10. ウィンドウの上部にある [表示] ボックスの一覧で [行] をクリックします。Row1 を 90% に、Row2 を 10% に設定します。

11. [OK] をクリックします。これで、TableLayoutPanel の上の行が大きくなり、下の行が小さくなります。また、左の列が小さくなり、右の列が大きくなります。TableLayoutPanel の行と列のサイズは、境界線をドラッグして変更することができます。

続行または確認するには

• チュートリアルの次の手順に進むには、「手順 5: フォームへのコントロールの追加」を参照してください。

• チュートリアルの前の手順に戻るには、「手順 3: フォームのプロパティの設定」を参照してください。