手順 4: TableLayoutPanel コントロールを使用したフォームのレイアウトの設定Step 4: Lay Out Your Form with a TableLayoutPanel Control

この手順では、フォームに TableLayoutPanel コントロールを追加します。In this step, you add a TableLayoutPanel control to your form. TableLayoutPanel は、後で追加するフォームのコントロールを適切にアラインするために役立ちます。The TableLayoutPanel helps properly align controls in the form that you will add later.

ビデオへのリンクこのトピックのビデオ版については、「チュートリアル 1: Visual Basic によるピクチャ ビューアーの作成 - ビデオ 2」または「チュートリアル 1: C# によるピクチャ ビューアーの作成 - ビデオ 2」を参照してください。link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 or Tutorial 1: Create a Picture Viewer in C# - Video 2. これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニュー コマンドやその他のユーザー インターフェイス要素が若干異なります。These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。However, the concepts and procedures work similarly in the current version of Visual Studio.

TableLayoutPanel コントロールを使用してフォームのレイアウトを設定するにはTo lay out your form with a TableLayoutPanel control

  1. Visual Studio IDE の左側で、[ツールボックス] タブを探します。[ツールボックス] のタブをクリックすると、ツールボックスが表示されます。On the left side of the Visual Studio IDE, locate the Toolbox tab. Choose the Toolbox tab, and the Toolbox appears. (メニュー バーで [表示][ツールボックス] の順にクリックします。)(Or, on the menu bar, choose View, Toolbox.)

  2. 次の図に示すように、[コンテナー] グループの横にある小さな三角形をクリックして、このグループを開きます。Choose the small triangle symbol next to the Containers group to open it, as shown in the following picture.

    [コンテナー] グループContainers group
    [コンテナー] グループContainers group

  3. ボタン、チェック ボックス、ラベルなどのコントロールをフォームに追加できます。You can add controls like buttons, check boxes, and labels to your form. ツールボックスの TableLayoutPanel コントロールをダブルクリックします。Double-click the TableLayoutPanel control in the Toolbox. (または、ツールボックスからフォームへ、コントロールをドラッグできます。)次の図に示すように、この操作を行うと、IDE で TableLayoutPanel コントロールがフォームに追加されます。(Or, you can drag the control from the toolbox onto the form.) When you do this, the IDE adds a TableLayoutPanel control to your form, as shown in the following picture.

    TableLayoutPanel コントロールTableLayoutPanel control
    TableLayoutPanel コントロールTableLayoutPanel control

    注意

    TableLayoutPanel を追加した後、[TableLayoutPanel タスク] というタイトルのウィンドウがフォーム内に表示された場合は、フォーム内の任意の場所をクリックしてそのウィンドウを閉じます。After you add your TableLayoutPanel, if a window appears inside your form with the title TableLayoutPanel Tasks, choose anywhere inside the form to close it. このウィンドウについては、このチュートリアルで後ほど詳しく説明します。You will learn more about this window later in the tutorial.

    ツールボックスは、タブをクリックするとフォームの前面に展開され、ツールボックスの外部の任意の場所をクリックすると閉じます。Notice how the Toolbox expands to cover your form when you choose its tab, and closes after you choose anywhere outside of it. これは、IDE の自動非表示機能です。That's the IDE auto-hide feature. ウィンドウの右上隅にあるプッシュピン アイコンをクリックすると、すべてのウィンドウについてこの機能のオンとオフを切り替えることができます。このアイコンをクリックするたびに、自動非表示になるか位置が固定されるかが切り替わります。You can turn it on or off for any of the windows by choosing the pushpin icon in the upper-right corner of the window to toggle auto-hide and lock it in place. プッシュピン アイコンは次のように表示されます。The pushpin icon appears as follows.

    プッシュピン アイコンPushpin icon
    プッシュピン アイコンPushpin icon

  4. TableLayoutPanel をクリックして選択します。Be sure TableLayoutPanel is selected by choosing it. どのコントロールが選択されているかを確認するには、次の図のような、[プロパティ] ウィンドウの上部にあるドロップダウン リストを確認します。You can verify what control is selected by looking at the drop-down list at the top of the Properties window, as shown in the following picture.

    TableLayoutPanel コントロールを示す [プロパティ] ウィンドウProperties window showing TableLayoutPanel control
    TableLayoutPanel コントロールを示す [プロパティ] ウィンドウProperties window showing TableLayoutPanel control

  5. [プロパティ] ウィンドウのツール バーにある [アルファベット順] をクリックします。Choose the Alphabetical button on the toolbar in the Properties window. これにより、[プロパティ] ウィンドウのプロパティの一覧がアルファベット順に表示され、このチュートリアルのプロパティが探しやすくなります。This causes the list of properties in the Properties window to display in alphabetical order, which will make it easier to locate properties in this tutorial.

  6. コントロール セレクターは、[プロパティ] ウィンドウの上部にあるドロップダウン リストです。The control selector is a drop-down list at the top of the Properties window. この例では、tableLayoutPanel1 というコントロールが選択されています。In this example, it shows that a control called tableLayoutPanel1 is selected. コントロールを選択するには、Windows フォーム デザイナーの領域をクリックするか、コントロール セレクターから選択します。You can select controls either by choosing an area in Windows Forms Designer or by choosing from the control selector. TableLayoutPanel が選択されているので、Dock プロパティを探し、[Dock] をクリックします (None に設定されています)。Now that TableLayoutPanel is selected, find the Dock property and choose Dock, which should be set to None. 値の横にドロップダウン矢印が表示されます。Notice that a drop-down arrow appears next to the value. 次の図に示すように、矢印をクリックし、[Fill] ボタン (中央にある大きいボタン) をクリックします。Choose the arrow, and then select the Fill button (the large button in the middle), as shown in the following picture.

    [塗りつぶし] が選択された [プロパティ] ウィンドウProperties window with Fill selected
    [塗りつぶし] が選択された [プロパティ] ウィンドウProperties window with Fill selected

    ウィンドウが別のウィンドウまたは IDE の領域にアタッチされている場合、Visual Studio のドッキングが参照します。Docking in Visual Studio refers to when a window is attached to another window or area in the IDE. たとえば、[プロパティ] ウィンドウはドッキング解除できます。つまり、Visual Studio 内でアタッチされておらず、フローティング状態であるか、またはソリューション エクスプローラーに対してドッキングできます。For example, the Properties window can be undocked - that is, unattached and free-floating within Visual Studio - or it can be docked against Solution Explorer.

  7. TableLayoutPanel の Dock プロパティを Fill に設定すると、パネルがフォーム全体に表示されます。After you set the TableLayoutPanel Dock property to Fill, the panel fills the entire form. この後にフォームのサイズを変更した場合、TableLayoutPanel はドッキングされたまま、フォームに合わせてサイズが変更されます。If you resize the form again, the TableLayoutPanel stays docked, and resizes itself to fit.

    注意

    TableLayoutPanel は、Microsoft Office Word の表に似ています。行と列があり、個々のセルは複数の行および列にまたがることができます。A TableLayoutPanel works like a table in Microsoft Office Word: It has rows and columns, and an individual cell can span multiple rows and columns. 各セルでは、1 つのコントロール (ボタン、チェック ボックス、ラベルなど) を保持できます。Each cell can hold one control (like a button, a check box, or a label). ここでは、TableLayoutPanel の上の行に行全体にまたがる PictureBox コントロールを配置し、左下のセルに CheckBox コントロールを配置し、右下のセルに 4 つの Button コントロールを配置します。Your TableLayoutPanel will have a PictureBox control spanning its entire top row, a CheckBox control in its lower-left cell, and four Button controls in its lower-right cell.

  8. 現在、TableLayoutPanel には 2 つの行と 2 つの列がありますが、いずれもサイズは同じになっています。Currently, the TableLayoutPanel has two equal-size rows and two equal-size columns. 上の行と右の列のサイズがそれぞれ他方よりもかなり大きくなるように変更する必要があります。You need to resize them so the top row and right column are both much bigger. Windows フォーム デザイナーで、TableLayoutPanel を選択します。In Windows Forms Designer, select the TableLayoutPanel. 右上隅に、次のような小さな黒い三角形のボタンが表示されます。In the upper-right corner, there is a small black triangle button, which appears as follows.

    三角形のボタンTriangle button
    三角形のボタンTriangle button

    このボタンは、コントロールのプロパティを自動的に設定するのに役立つタスクがあることを示しています。This button indicates that the control has tasks that help you set its properties automatically.

  9. 三角形をクリックします。次の図に示すように、コントロールのタスク一覧が表示されます。Choose the triangle to display the control's task list, as shown in the following picture.

    TableLayoutPanel タスクTableLayoutPanel tasks
    TableLayoutPanel タスクTableLayoutPanel tasks

  10. [行および列の編集] タスクをクリックして、[列と行のスタイル] ウィンドウを表示します。Choose the Edit Rows and Columns task to display the Column and Row Styles window. [Column1] をクリックし、サイズを 15% に設定します。設定するには、[パーセント] ボタンが選択されていることを確認し、[パーセント] ボックスに「15」と入力します。Choose Column1, and set its size to 15 percent by being sure the Percent button is selected and entering 15 in the Percent box. (これは、この後の別のチュートリアルで使用する NumericUpDown コントロールです)。[Column2] をクリックし、85% に設定します。(That's a NumericUpDown control, which you will use in a later tutorial.) Choose Column2 and set it to 85 percent. クリックするとウィンドウが閉じるため、まだ [OK] はクリックしないでくださいDon't choose the OK button yet, because the window will close. (クリックした場合は、タスク一覧を使用して再度開くことができます)。(But if you do, you can reopen it using the task list.)

    TableLayoutPanel の列と行のスタイルTableLayoutPanel column and row styles
    TableLayoutPanel の列と行のスタイルTableLayoutPanel column and row styles

  11. ウィンドウの上部にある [表示] ドロップダウン リストの [行] をクリックします。From the Show drop-down list at the top of the window, choose Rows. Row1 を 90% に、Row2 を 10% に設定します。Set Row1 to 90 percent and Row2 to 10 percent.

  12. [OK] を選択します。Choose the OK button. これで、TableLayoutPanel の上の行が大きくなり、下の行が小さくなります。また、左の列が小さくなり、右の列が大きくなります。Your TableLayoutPanel should now have a large top row, a small bottom row, a small left column, and a large right column. フォームで tableLayoutPanel1 をクリックし、その行と列の境界線をドラッグして、TableLayoutPanel の行と列のサイズ変更できます。You can resize the rows and columns in the TableLayoutPanel by choosing tableLayoutPanel1 in the form and then dragging its row and column borders.

    TableLayoutPanel がサイズ変更された Form1Form1 with resized TableLayoutPanel
    TableLayoutPanel がサイズ変更された Form1Form1 with resized TableLayoutPanel

続行または確認するにはTo continue or review