共用方式為

逐步解說：使用 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 Form 設計工具中選取表單。

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

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。 請注意，此動作會將其移動，使其右框線靠近儲存格的右框線。 框線之間的距離是 Button 控制項的 Margin 屬性與面板 Padding 屬性的總和。

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

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

設定資料列和資料行屬性

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

設定資料列和資料行屬性

  1. 在 Windows Form 設計工具中，選取 TableLayoutPanel 控制項。

  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 控制項停駐在父表單。 調整表單的大小，並注意配置的效果。

另請參閱