共用方式為

逐步解說：使用 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. 在 [屬性] 視窗中，按兩下 [資料行] 專案旁的省略號 （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 控制項停駐在父表單。 調整表單的大小，並注意配置的效果。

另請參閱