チュートリアル: TableLayoutPanel を使用した Windows フォーム上のコントロールの配置Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel

アプリケーションによっては、フォームのサイズを変更したり、コンテンツのサイズが変化したりしたときに、それに応じて自動的にレイアウトを調整するフォームが必要です。Some applications require a form with a layout that arranges itself appropriately as the form is resized or as the contents change in size. 動的なレイアウトが必要であり、かつコードで Layout イベントを明示的に処理しない場合は、レイアウト パネルの使用をご検討ください。When you need a dynamic layout and you do not want to handle Layout events explicitly in your code, consider using a layout panel.

FlowLayoutPanel コントロールと TableLayoutPanel コントロールを使用すると、コントロールをフォームに直感的な方法で配置できます。The FlowLayoutPanel control and the TableLayoutPanel control provide intuitive ways to arrange controls on your form. これら 2 つのコントロールは、それぞれに含まれる子コントロールの相対位置を制御するための自動的で構成可能な機能を提供します。また、どちらも実行時に動的なレイアウト機能を提供するため、親フォームの寸法の変更に応じて子コントロールのサイズと位置を変更できます。Both provide an automatic, configurable ability to control the relative positions of child controls contained within them, and both give you dynamic layout features at run time, so they can resize and reposition child controls as the dimensions of the parent form change. レイアウト パネルは他のレイアウト パネルの入れ子にすることができるため、高度なユーザー インターフェイスを実現できます。Layout panels can be nested within layout panels, to enable the realization of sophisticated user interfaces.

FlowLayoutPanel はその内容を特定のフローの方向 (水平または垂直) に配置します。The FlowLayoutPanel arranges its contents in a specific flow direction: horizontal or vertical. ある行から次の行、またはある列から次の列に内容をラップすることができます。Its contents can be wrapped from one row to the next, or from one column to the next. また、ラップする代わりにクリップすることもできます。Alternately, its contents can be clipped instead of wrapped. 詳細については、「チュートリアル:FlowLayoutPanelを使用して Windows フォームのコントロールを配置する。For more information, see Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel.

TableLayoutPanel 、その内容をグリッドに配置し、HTML <テーブル > 要素と同様の機能を提供します。The TableLayoutPanel arranges its contents in a grid, providing functionality similar to the HTML <table> element. TableLayoutPanelコントロールを使用すると、個々のコントロールの位置を正確に指定する必要なく、グリッドレイアウトにコントロールを配置できます。The TableLayoutPanel control allows you to place controls in a grid layout without requiring you to precisely specify the position of each individual control. セルは行と列に配置され、それぞれに異なるサイズを設定できます。Its cells are arranged in rows and columns, and these can have different sizes. セルは、行と列の間でマージできます。Cells can be merged across rows and columns. セルには、フォームに含めることができるすべてのものを含めることができ、他のほとんどの点でコンテナーとして動作できます。Cells can contain anything a form can contain and behave in most other respects as containers.

コントロールTableLayoutPanelは、実行時に比例したサイズ変更機能も提供します。これにより、フォームのサイズが変更されたときにレイアウトがスムーズに変化するようになります。The TableLayoutPanel control also provides a proportional resizing capability at run time, so your layout can change smoothly as your form is resized. これによりTableLayoutPanel 、データ入力フォームやローカライズされたアプリケーションなどの目的に適したコントロールが作成されます。This makes the TableLayoutPanel control well suited for purposes such as data-entry forms and localized applications. 詳細については、「チュートリアル:データ入力およびチュートリアル用のサイズ変更可能な Windows フォームの作成:ローカライズ可能な Windows フォームを作成する。For more information, see Walkthrough: Creating a Resizable Windows Form for Data Entry and Walkthrough: Creating a Localizable Windows Form.

一般に、レイアウト全体のコンテナーとTableLayoutPanelしてコントロールを使用しないでください。In general, you should not use a TableLayoutPanel control as a container for the whole layout. コントロールTableLayoutPanelを使用して、レイアウトの一部に比例したサイズ変更機能を提供します。Use TableLayoutPanel controls to provide proportional resizing capabilities to parts of the layout.

このチュートリアルでは、以下のタスクを行います。Tasks illustrated in this walkthrough include:

  • Windows フォーム プロジェクトの作成Creating a Windows Forms project

  • 行と列のコントロールの配置Arranging Controls in Rows and Columns

  • 行と列のプロパティの設定Setting Row and Column Properties

  • コントロールを使用した行と列のスパニングSpanning Rows and Columns with a Control

  • オーバーフローの自動処理Automatic Handling of Overflows

  • ツールボックスでのダブルクリックによるコントロールの挿入Inserting Controls by Double-clicking Them in the Toolbox

  • アウトラインの描画によるコントロールの挿入Inserting a Control by Drawing Its Outline

  • 別の親コントロールへの既存コントロールの再割り当てReassigning Existing Controls to a Different Parent

終了すると、これらの重要なレイアウト機能が果たす役割について理解できます。When you are finished, you will have an understanding of the role played by these important layout features.

プロジェクトの作成Creating the Project

最初にプロジェクトを作成し、フォームを設定します。The first step is to create the project and set up the form.

プロジェクトを作成するにはTo create the project

  1. "TableLayoutPanelExample" という名前の Windows アプリケーションプロジェクトを作成します。Create a Windows Application project called "TableLayoutPanelExample". 詳細については、「方法 :Windows フォームアプリケーションプロジェクトを作成します。For more information, see How to: Create a Windows Forms application project .

  2. Windows フォームデザイナーでフォームを選択します。Select the form in the Windows Forms Designer.

行と列のコントロールの配置Arranging Controls in Rows and Columns

コントロールTableLayoutPanelを使用すると、簡単にコントロールを行と列に配置できます。The TableLayoutPanel control allows you to easily arrange controls into rows and columns.

TableLayoutPanel を使用して行と列のコントロールを配置するにはTo arrange controls in rows and columns using a TableLayoutPanel

  1. TableLayoutPanel ツールボックス から コントロールをフォームにドラッグします。Drag a TableLayoutPanel control from the Toolbox onto your form. 既定では、 TableLayoutPanelコントロールには4つのセルがあります。Note that, by default, the TableLayoutPanel control has four cells.

  2. コントロールをButton [ツールボックス] からコントロールにドラッグして、いずれかのセルにドロップします。TableLayoutPanelDrag a Button control from the Toolbox into the TableLayoutPanel control and drop it into one of the cells. 選択したButtonセル内にコントロールが作成されることに注意してください。Note that the Button control is created within the cell you selected.

  3. 3つButtonのコントロールを [ TableLayoutPanel ツールボックス] からコントロールにドラッグして、各セルにボタンを含めます。Drag three more Button controls from the Toolbox into the TableLayoutPanel control, so that each cell contains a button.

  4. 2つの列の間の垂直方向のサイズ変更ハンドルを取得し、それを左に移動します。Grab the vertical sizing handle between the two columns and move it to the left. 最初の列Buttonのコントロールのサイズがより小さい幅に変更され、2番目Buttonの列のコントロールのサイズは変更されないことに注意してください。Note that the Button controls in the first column are resized to a smaller width, while size of the Button controls in the second column is unchanged.

  5. 2つの列の間の垂直方向のサイズ変更ハンドルを取得し、右に移動します。Grab the vertical sizing handle between the two columns and move it to the right. 最初の列Buttonのコントロールは元のサイズに戻り、 Button 2 番目の列のコントロールは右に移動することに注意してください。Note that the Button controls in the first column return to their original size, while the Button controls in the second column are moved to the right.

  6. 水平方向のサイズ変更ハンドルを上下に移動して、パネル内のコントロールに対する効果を確認します。Move the horizontal sizing handle up and down to see the effect on the controls in the panel.

ドッキングと固定を使用したセル内でのコントロールの配置Positioning Controls Within Cells Using Docking and Anchoring

内の子コントロールの固定動作はTableLayoutPanel 、他のコンテナーコントロールの動作とは異なります。The anchoring behavior of child controls in a TableLayoutPanel differs from the behavior in other container controls. 子コントロールのドッキング動作は、他のコンテナーコントロールと同じです。The docking behavior of child controls is the same as other container controls.

セル内でのコントロールの配置Positioning controls within cells

  1. 最初Buttonのコントロールを選択します。Select the first Button control. Dock プロパティの値を Fillに変更します。Change the value of its Dock property to Fill. コントロールがセルButtonを塗りつぶすように拡張されていることに注意してください。Note that the Button control expands to fill its cell.

  2. Buttonのコントロールのいずれかを選択します。Select one of the other Button controls. Anchor プロパティの値を Rightに変更します。Change the value of its Anchor property to Right. 右側の境界線がセルの右境界の近くに移動されることに注意してください。Note that it is moved so that its right border is near the right border of the cell. 境界線間の距離は、 ButtonコントロールのMarginプロパティとパネルのPaddingプロパティの合計です。The distance between the borders is the sum of the Button control's Margin property and the panel's Padding property.

  3. ButtonコントロールのAnchorプロパティの値をおよびLeftRight変更します。Change the value of the Button control's Anchor property to Right and Left. コントロールのサイズはセルの幅に合わせMarginて調整され、値とPadding値が考慮されることに注意してください。Note that the control is sized to the width of the cell, with the Margin and Padding values taken into account.

  4. Top およびBottomスタイルを使用して、手順 2. と 3. を繰り返します。Repeat steps 2 and 3 with the Top and Bottom styles.

行と列のプロパティの設定Setting Row and Column Properties

RowStyles およびColumnStylesコレクションを使用すると、行と列の個々のプロパティを設定できます。You can set individual properties of rows and columns by using the RowStyles and ColumnStyles collections.

行と列のプロパティを設定するにはTo set row and column properties

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

  2. [プロパティ] ウィンドウで、[ ColumnStyles ] エントリの横にある省略記号 (省略記号ボタン ([...] プロパティウィンドウ) ボタンをクリックして、コレクションを開きます。In the Properties windows, open the ColumnStyles collection by clicking the ellipsis (The Ellipsis button (...) in the Properties window of Visual Studio.) button next to the Columns entry.

  3. 最初の列を選択し、そのSizeTypeプロパティの値をにAutoSize変更します。Select the first column and change the value of its SizeType property to AutoSize. [OK] をクリックして変更を確定します。Click OK to accept the change. Buttonコントロールに応じて、最初の列の幅が小さくなることに注意してください。Note that the width of the first column is reduced to fit the Button control. 列の幅のサイズは変更できないことにも注意してください。Also note that the width of the column is not resizable.

  4. [プロパティ] ウィンドウで、 ColumnStylesコレクションを開き、最初の列を選択します。In the Properties window, open the ColumnStyles collection and select the first column. SizeType プロパティの値を Percentに変更します。Change the value of its SizeType property to Percent. [OK] をクリックして変更を確定します。Click OK to accept the change. コントロールのTableLayoutPanel幅を大きくして、最初の列の幅が拡大することを確認します。Resize the TableLayoutPanel control to a larger width and note that the width of the first column expands. コントロールのTableLayoutPanel幅を小さくして、セルに合わせて最初の列のボタンのサイズを変更します。Resize the TableLayoutPanel control to a smaller width and note that the buttons in the first column are sized to fit the cell. また、列の幅が変更可能であることにも注意してください。Also note that the width of the column is resizable.

  5. [プロパティ] ウィンドウで、 ColumnStylesコレクションを開き、表示されているすべての列を選択します。In the Properties window, open the ColumnStyles collection and select all the listed columns. すべてSizeTypeのプロパティの値をにPercent設定します。Set the value of every SizeType property to Percent. [OK] をクリックして変更を確定します。Click OK to accept the change. RowStylesコレクションを使用して繰り返します。Repeat with the RowStyles collection.

  6. コーナーのサイズを変更するハンドルの1つをつかんで、 TableLayoutPanelコントロールの幅と高さの両方を調整します。Grab one of the corner resizing handles and resize both the width and height of the TableLayoutPanel control. TableLayoutPanelコントロールのサイズが変更されたときに、行と列のサイズが変更されることに注意してください。Note that the rows and columns are resized as the TableLayoutPanel control's size changes. また、行と列は、水平方向と垂直方向のサイズ変更ハンドルでサイズ変更できることにも注意してください。Also note that the rows and columns are resizable with the horizontal and vertical sizing handles.

コントロールを使用した行と列のスパニングSpanning Rows and Columns with a Control

コントロールTableLayoutPanelは、デザイン時にコントロールに新しいプロパティをいくつか追加します。The TableLayoutPanel control adds several new properties to controls at design time. これらのプロパティのうちRowSpanColumnSpan2 つは、およびです。Two of these properties are RowSpan and ColumnSpan. これらのプロパティを使用して、1つのコントロールが複数の行または列にまたがって表示されるようにすることができます。You can use these properties to make a control span more than one row or column.

コントロールを使用して行と列をスパンするにはTo span rows and columns with a control

  1. 最初の行と最初の列のコントロールを選択します。ButtonSelect the Button control in the first row and first column.

  2. [プロパティ] ウィンドウで、 ColumnSpanプロパティの値を2に変更します。In the Properties windows, change the value of the ColumnSpan property to 2. コントロールがButton最初の列と2番目の列に入力することに注意してください。Note that the Button control fills the first column and the second column. また、この変更に対応するために余分な行が追加されていることにも注意してください。Also note than an extra row has been added to accommodate this change.

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

ツールボックスでのダブルクリックによるコントロールの挿入Inserting Controls by Double-clicking Them in the Toolbox

TableLayoutPanel ツールボックス でコントロールをダブルクリックすると、 コントロールに内容を挿入できます。You can populate your TableLayoutPanel control by double-clicking controls in the Toolbox.

ツールボックスでダブルクリックしてコントロールを挿入するにはTo insert controls by double-clicking in the Toolbox

  1. TableLayoutPanel ツールボックス から コントロールをフォームにドラッグします。Drag a TableLayoutPanel control from the Toolbox onto your form.

  2. Button ツールボックス コントロール アイコンをダブルクリックします。Double-click the Button control icon in the Toolbox. TableLayoutPanelコントロールの最初のセルに新しいボタンコントロールが表示されることに注意してください。Note that a new button control appears in the TableLayoutPanel control's first cell.

  3. ツールボックスでさらにいくつかのコントロールをダブルクリックします。Double-click several more controls in the Toolbox. 新しいコントロールは、 TableLayoutPanelコントロールの未使用のセルに連続して表示されることに注意してください。Note that the new controls appear successively in the TableLayoutPanel control's unoccupied cells. また、開いてTableLayoutPanelいるセルがない場合は、新しいコントロールに合わせてコントロールが拡張されることにも注意してください。Also note that the TableLayoutPanel control expands to accommodate the new controls if no open cells are available.

オーバーフローの自動処理Automatic Handling of Overflows

コントロールにコントロールをTableLayoutPanel挿入するときに、新しいコントロールの空のセルが不足する場合があります。When you are inserting controls into the TableLayoutPanel control, you may run out of empty cells for your new controls. コントロールTableLayoutPanelは、セルの数を増やすことで、この状況を自動的に処理します。The TableLayoutPanel control handles this situation automatically by increasing the number of cells.

オーバーフローの自動処理を監視するにはTo observe automatic handling of overflows

  1. TableLayoutPanelコントロールに空のセルが残っている場合は、 TableLayoutPanelコントロールButtonがいっぱいになるまで新しいコントロールを挿入し続けます。If there are still empty cells in the TableLayoutPanel control, continue inserting new Button controls until the TableLayoutPanel control is full.

  2. コントロールがいっぱいになったら、 Button [ツールボックス] のアイコンをダブルクリックしButtonて、別のコントロールを挿入します。 TableLayoutPanelOnce the TableLayoutPanel control is full, double-click the Button icon in the Toolbox to insert another Button control. コントロールはTableLayoutPanel 、新しいコントロールを格納するために新しいセルを作成することに注意してください。Note that the TableLayoutPanel control creates new cells to accommodate the new control. さらにいくつかのコントロールを挿入し、サイズ変更動作を観察します。Insert a few more controls and observe the resizing behavior.

  3. TableLayoutPanel コントロールの GrowStyle プロパティの値を FixedSizeに変更します。Change the value of the TableLayoutPanel control's GrowStyle property to FixedSize. コントロールがいっぱいにButtonなるまでコントロールをButton挿入するには、[ツールボックス] のアイコンをダブルクリックします。 TableLayoutPanelDouble-click the Button icon in the Toolbox to insert Button controls until the TableLayoutPanel control is full. もう一度 [ Button ツールボックス] のアイコンをダブルクリックします。Double-click the Button icon in the Toolbox again. 追加の行と列を作成できないことを通知するWindows フォームデザイナーからのエラーメッセージが表示されます。Note that you receive an error message from the Windows Forms Designer informing you that additional rows and columns cannot be created.

アウトラインの描画によるコントロールの挿入Inserting a Control by Drawing Its Outline

セルにアウトラインを描画すると、コントロールを TableLayoutPanel コントロールに挿入し、サイズを指定できます。You can insert a control into a TableLayoutPanel control and specify its size by drawing its outline in a cell.

アウトラインを描画してコントロールを挿入するにはTo insert a Control by drawing its outline

  1. TableLayoutPanel ツールボックス から コントロールをフォームにドラッグします。Drag a TableLayoutPanel control from the Toolbox onto your form.

  2. ツールボックスButton コントロール アイコンをクリックします。In the Toolbox, click the Button control icon. フォームにドラッグしないでください。Do not drag it onto the form.

  3. TableLayoutPanel コントロールにマウス ポインターを置きます。Move the mouse pointer over the TableLayoutPanel control. ポインターが Button コントロール アイコンが付いた十字カーソルに変わることにご注意ください。Note that the pointer changes to a crosshair with the Button control icon attached.

  4. マウス ボタンを押したままにします。Click and hold the mouse button.

  5. マウス ポインターをドラッグして、 Button コントロールのアウトラインを描画します。Drag the mouse pointer to draw the outline of the Button control. 適切なサイズのアウトラインを描画したら、マウス ボタンを離します。When you are satisfied with the size, release the mouse button. コントロールは、 Buttonコントロールのアウトラインを描画したセルに作成されることに注意してください。Note that the Button control is created in the cell in which you drew the control's outline.

セル内の複数のコントロールが許可されていませんMultiple Controls Within Cells Are Not Permitted

コントロールTableLayoutPanelには、セルごとに1つの子コントロールのみを含めることができます。The TableLayoutPanel control can contain only one child control per cell.

セル内の複数のコントロールが許可されていないことを示すにはTo demonstrate that multiple controls within cells are not permitted

  • コントロールをButton [ツールボックス] からコントロールにドラッグし、占有されているセルのいずれかにドロップします。TableLayoutPanelDrag a Button control from the Toolbox into the TableLayoutPanel control and drop it into one of the occupied cells. TableLayoutPanelコントロールを使用して、 Buttonコントロールを占有セルにドロップすることはできないことに注意してください。Note that the TableLayoutPanel control does not allow you to drop the Button control into the occupied cell.

コントロールの交換Swapping Controls

TableLayoutPanelコントロールを使用すると、2つの異なるセルを占有するコントロールを入れ替えることができます。The TableLayoutPanel control enables you to swap the controls occupying two different cells.

コントロールをスワップするにはTo swap controls

  • 占有されてButtonいるセルからコントロールの1つをドラッグし、別の占有セルにドロップします。Drag one of the Button controls from an occupied cell and drop into onto another occupied cell. 2つのコントロールが1つのセルから別のセルに移動されることに注意してください。Note that the two controls are moved from one cell into the other.

次の手順Next Steps

レイアウト パネルとコントロールを組み合わせて使用すると、複雑なレイアウトを作成できます。You can achieve a complex layout using a combination of layout panels and controls. さらに詳しく調べるための推奨事項を次に示します。Suggestions for more exploration include:

  • Buttonコントロールの1つをより大きなサイズに変更し、レイアウトへの影響を確認してみてください。Try resizing one of the Button controls to a larger size and note the effect on the layout.

  • 複数のコントロールの選択内容をTableLayoutPanelコントロールに貼り付け、コントロールがどのように挿入されるかを確認します。Paste a selection of multiple controls into the TableLayoutPanel control and note how the controls are inserted.

  • レイアウト パネルには、別のレイアウト パネルを含めることができます。Layout panels can contain other layout panels. TableLayoutPanel コントロールを既存のコントロールにドロップしてみます。Experiment with dropping a TableLayoutPanel control into the existing control.

  • TableLayoutPanel コントロールを親フォームにドッキングします。Dock the TableLayoutPanel control to the parent form. フォームのサイズを変更し、レイアウトの変化を確認します。Resize the form and note the effect on the layout.

関連項目See also