逐步解說：使用 TableLayoutPanel 排列 Windows Form 上的控制項

  • 發行項

有些應用程式需要表單能在調整表單大小或變更內容大小時，自行適當排列配置。 當需要動態配置但不想用程式碼明確處理 Layout 事件時，請考慮使用配置面板。

FlowLayoutPanel 控制項和 TableLayoutPanel 控制項提供直覺的方式，排列表單上的控制項。 這兩者都提供自動且可設定的功能，可用來控制其內含子控制項的相對位置，而且也都能為執行階段提供動態配置功能，所以每當父表單變更維度時，子控制項的大小和位置就會相應調整。 配置面板可以巢嵌在配置面板內，從而提供精緻的使用者介面。

FlowLayoutPanel 會以特定的水平或垂直文字方向排列其內容。 其內容可以從某一資料列換行至下一個資料列，或從某一資料行換行至下一個資料行。 此外，也可裁剪其內容而不換行。 如需詳細資訊，請參閱 逐步解說：使用 FlowLayoutPanel 排列 Windows Forms 上的控制項。

會在 TableLayoutPanel 方格中排列其內容，提供類似 HTML < 資料表 > 元素的功能。 控制項 TableLayoutPanel 可讓您將控制項放在格線配置中，而不需要您精確地指定每個個別控制項的位置。 其儲存格依資料列和資料行排列，大小可以各不相同。 儲存格可以跨資料列和資料行合併。 儲存格可以包含表單可以包含的任何專案，而且在大部分的其他方面都以容器的形式運作。

控制項 TableLayoutPanel 也會在執行時間提供比例調整大小功能，因此您的版面配置可以在調整表單大小時順暢地變更。 這讓 TableLayoutPanel 控制項非常適合用於資料輸入表單和當地語系化應用程式等用途。 如需詳細資訊，請參閱 逐步解說：建立適用于資料輸入 的可調整大小的 Windows Form 和 逐步解說：建立可當地語系化的 Windows Form 。

一般而言，您不應該使用 TableLayoutPanel 控制項作為整個版面配置的容器。 使用 TableLayoutPanel 控制項為版面配置的各個部分提供比例調整功能。

這個逐步解說中所述的工作包括：

  • 建立 Windows Forms 專案

  • 排列資料列和資料行中的控制項

  • 設定資料列和資料行屬性

  • 使用 控制項跨越資料列和資料行

  • 自動處理溢位

  • 在 [工具箱] 中按兩下控制項以插入控制項

  • 繪製控制項外框以插入控制項

  • 將現有控制項重新指派至不同的父代

完成後，您就會了解這些重要配置功能所扮演的角色。

建立專案

第一個步驟是建立專案並設定表單。

建立專案

  1. 建立名為 「TableLayoutPanelExample」 的 Windows 應用程式專案。 如需詳細資訊，請參閱 如何：建立 Windows Forms 應用程式專案 。

  2. 選取 Windows Forms 設計 工具中的 表單。

排列資料列和資料行中的控制項

控制項 TableLayoutPanel 可讓您輕鬆地將控制項排列成資料列和資料行。

使用 TableLayoutPanel 排列列和資料行中的控制項

  1. 從 [工具箱] TableLayoutPanel將 控制項拖曳至表單。 請注意，根據預設， TableLayoutPanel 控制項有四個儲存格。

  2. 將控制項從 [工具箱 ] Button 拖曳至 控制項， TableLayoutPanel 並將其放入其中一個儲存格中。 請注意， Button 控制項會在您選取的儲存格內建立。

  3. 將三個控制項 Button 從 [工具箱 ] 拖曳至 TableLayoutPanel 控制項，讓每個儲存格都包含 一個按鈕。

  4. 擷取兩個數據行之間的垂直調整大小控點，並將它移至左邊。 請注意， Button 第一個資料行中的控制項會調整大小為較小的寬度，而第二欄中的控制項大小 Button 則保持不變。

  5. 擷取兩個數據行之間的垂直調整大小控點，並將它移至右側。 請注意， Button 第一個資料行中的控制項會傳回其原始大小，而 Button 第二個數據行中的控制項則移至右邊。

  6. 向上和向下移動水準調整大小控點，以查看面板控制項的效果。

使用停駐和錨定在儲存格內放置控制項

中 TableLayoutPanel 子控制項的錨定行為與其他容器控制項的行為不同。 子控制項的停駐行為與其他容器控制項相同。

在儲存格內放置控制項

  1. 選取第一個 Button 控制項。 將其 Dock 屬性的值變更為 Fill。 請注意，控制項 Button 會展開以填滿其儲存格。

  2. 選取其中一個其他 Button 控制項。 將其 Anchor 屬性的值變更為 Right。 請注意，它已移動，使其右框線靠近儲存格的右框線。 框線之間的距離是控制項 Margin 屬性和麵板 Padding 屬性的總 Button 和。

  3. 將 Button 控制項 Anchor 的 屬性值變更為 Right 和 Left 。 請注意，控制項的大小會調整為儲存格的寬度，並 Margin 考慮 和 Padding 值。

  4. 使用 Top 和 Bottom 樣式重複步驟 2 和 3。

設定資料列和資料行屬性

您可以使用 和 ColumnStyles 集合來設定資料列和資料 RowStyles 行的個別屬性。

設定資料列和資料行屬性

  1. TableLayoutPanel選取 Windows Forms 設計 工具中的 控制項。

  2. 在 [ 屬性] 視窗中，按一下 [資料 行] 專案旁 的省略號 （ The Ellipsis button (...) in the Properties window of Visual Studio. ） 按鈕，開啟 ColumnStyles 集合。

  3. 選取第一個資料行， SizeType 並將其 屬性的值變更為 AutoSize 。 按一下 [ 確定 ] 接受變更。 請注意，第一欄的寬度會縮小以符合 Button 控制項。 另請注意，資料行的寬度無法調整大小。

  4. 在 [ 屬性] 視窗中，開啟集合並 ColumnStyles 選取第一個資料行。 將其 SizeType 屬性的值變更為 Percent。 按一下 [ 確定 ] 接受變更。 將 TableLayoutPanel 控制項的大小調整為較大的寬度，並請注意，第一欄的寬度會展開。 將 TableLayoutPanel 控制項的大小調整為較小的寬度，並請注意，第一個資料行中的按鈕會調整大小以符合儲存格。 另請注意，資料行的寬度可調整大小。

  5. 在 [ 屬性] 視窗中，開啟集合並 ColumnStyles 選取所有列出的資料行。 將每個 SizeType 屬性的值設定為 Percent 。 按一下 [ 確定 ] 接受變更。 使用 RowStyles 集合重複。

  6. 擷取其中一個角落調整大小控點，並調整控制項的 TableLayoutPanel 寬度和高度大小。 請注意，當控制項的大小變更時 TableLayoutPanel ，資料列和資料行會調整大小。 另請注意，資料列和資料行可使用水準和垂直調整大小控點來調整大小。

使用 控制項跨越資料列和資料行

控制項會在 TableLayoutPanel 設計階段將數個新屬性新增至控制項。 這兩個屬性是 RowSpan 和 ColumnSpan 。 您可以使用這些屬性，讓控制項跨越多個資料列或資料行。

使用 控制項跨越資料列和資料行

  1. Button選取第一個資料列和第一個資料行中的控制項。

  2. 在 [ 屬性] 視窗中，將 屬性的值 ColumnSpan 變更為 2 。 請注意， Button 控制項會填滿第一欄和第二欄。 另請注意，已新增額外的資料列以配合這項變更。

  3. 針對 RowSpan 屬性重複步驟 2。

在 [工具箱] 中按兩下控制項以插入控制項

在 [工具箱] TableLayoutPanel中按兩下控制項，即可填入控制項。

在 [工具箱] 中按兩下控制項以插入控制項

  1. 從 [工具箱] TableLayoutPanel將 控制項拖曳至表單。

  2. 在 [工具箱] Button中按兩下控制項圖示。 請注意，新的按鈕控制項會出現在 TableLayoutPanel 控制項的第一個儲存格中。

  3. 在數個 [工具箱] 的控制項上按兩下。 請注意，新的控制項會連續 TableLayoutPanel 出現在控制項的未配置儲存格中。 另請注意， TableLayoutPanel 如果沒有可用的開啟儲存格，控制項會展開以容納新的控制項。

自動處理溢位

當您將控制項插入控制項時 TableLayoutPanel ，可能會用盡新控制項的空白儲存格。 控制項 TableLayoutPanel 會自動藉由增加儲存格數目來處理這種情況。

觀察溢位的自動處理

  1. 如果控制項中仍有空白儲存格 TableLayoutPanel ，請繼續插入新的 Button 控制項， TableLayoutPanel 直到控制項已滿為止。

  2. TableLayoutPanel控制項已滿之後，按兩下 Button [工具箱 ] 中的 圖示以插入另一個 Button 控制項。 請注意， TableLayoutPanel 控制項會建立新的儲存格來容納新的控制項。 再插入一些控制項並觀察調整大小行為。

  3. 變更 TableLayoutPanel 控制項的 GrowStyle 屬性值為 FixedSize。 按兩下 Button [工具箱 ] 中的 圖示，以插入 Button 控制項， TableLayoutPanel 直到控制項已滿為止。 再次按兩下 Button [工具箱 ] 中的 圖示。 請注意，您會收到 Windows Forms 設計 工具的錯誤訊息，通知您無法建立其他資料列和資料行。

繪製控制項外框以插入控制項

您可以將控制項插入 TableLayoutPanel 控制項中，在儲存格中繪製其外框來指定其大小。

繪製控制項外框以插入控制項

  1. 從 [工具箱] TableLayoutPanel將 控制項拖曳至表單。

  2. 按一下 [工具箱] 的 Button 控制項圖示。 請勿拖曳到表單。

  3. 將滑鼠指標移至 TableLayoutPanel 控制項上。 請注意，指標會變成十字形狀並附有 Button 控制項圖示。

  4. 按住滑鼠按鈕。

  5. 拖曳滑鼠指標以繪製 Button 控制項的外框。 如滿意大小，請放開滑鼠按鈕。 請注意， Button 控制項會在您繪製控制項大綱的儲存格中建立。

不允許儲存格內的多個控制項

控制項 TableLayoutPanel 每個儲存格只能包含一個子控制項。

示範不允許儲存格內的多個控制項

  • 將控制項從 [工具箱 ] Button 拖曳至 TableLayoutPanel 控制項，並將其放入其中一個已佔用的儲存格中。 請注意， TableLayoutPanel 控制項不允許您將控制項放入 Button 已佔用的儲存格中。

交換控制項

控制項 TableLayoutPanel 可讓您交換佔用兩個不同儲存格的控制項。

交換控制項

  • 將其中一個控制項從已佔用的 Button 儲存格拖曳到另一個已佔用的儲存格上。 請注意，這兩個控制項會從一個儲存格移到另一個儲存格。

後續步驟

您可以組合配置面板和控制項，完成複雜的配置。 建議您進一步研究的部分包括：

  • 請嘗試將其中一個 Button 控制項大小調整為較大的大小，並記下版面配置的效果。

  • 將多個控制項的選取專案貼到 控制項中 TableLayoutPanel ，並記下控制項的插入方式。

  • 配置面板可以包含其他的配置面板。 實驗將 TableLayoutPanel 控制項放入現有的控制項。

  • 將 TableLayoutPanel 控制項停駐在父表單。 調整表單的大小，並注意配置的效果。

另請參閱