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

發行項
08/21/2008

更新：2007 年 11 月

某些應用程式需要具有配置的表單，此配置會在表單重新調整大小或內容大小變更時適當地排列表單。當您需要動態的配置，且不希望在程式碼中明確處理 Layout 事件時，請考慮使用配置面板。

FlowLayoutPanel 控制項和 TableLayoutPanel 控制項會以容易了解的方式排列表單上的控制項。兩者都提供自動而可設定的能力，可控制包含在其中的子控制項相對位置，且都提供在執行階段的動態配置功能，因此可以在父表單的維度變更時，調整子控制項的大小及位置。配置面板可以用巢狀方式套疊在配置面板內，藉此提供複雜的使用者介面。

TableLayoutPanel 會排列方格中的內容，提供與 HTML <table> 項目類似的功能。它的儲存格會在資料列和資料行中排列，且這些儲存格可以具有不同大小。如需詳細資訊，請參閱逐步解說：使用 TableLayoutPanel 排列 Windows Form 上的控制項。

FlowLayoutPanel 會以特定的流量方向排列內容：水平或垂直。其內容可以從某一資料列換行至下一個資料列，或從某一資料行換行至下一個資料行。此外，也可裁剪該內容而不換行。逐步解說將說明的工作包括：

建立 Windows Form 專案
水平和垂直排列控制項
變更流量方向
插入流量中斷點
使用邊框距離和邊界排列控制項
按兩下工具箱中的控制項以插入該控制項
繪製外框以插入控制項
使用插入號插入控制項
將現有的控制項重新指派至不同的父代

當您完成時，將會對這些重要的配置功能所扮演的角色有所了解。

注意事項：
根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。如果要變更設定，請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊，請參閱 Visual Studio 設定。

建立專案

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

若要建立專案

建立稱為 "FlowLayoutPanelExample" 的 Windows 架構應用程式專案。如需詳細資訊，請參閱 HOW TO：建立 Windows 應用程式專案。
從 [表單設計工具] 中選取表單。

水平和垂直排列控制項

FlowLayoutPanel 控制項能讓您沿著資料列或資料行放置控制項，而不需要精確指定每個個別控制項的位置。

FlowLayoutPanel 控制項可以在父表單的維度變更時調整子控制項的大小，並加以重新排列。

若要使用 FlowLayoutPanel 水平和垂直排列控制項

從 [工具箱] 將 FlowLayoutPanel 控制項拖曳至表單。
將 Button 控制項從 [工具箱] 拖曳至 FlowLayoutPanel 控制項。請注意，它會自動移至 FlowLayoutPanel 控制項的左上角。
將另一個 Button 控制項從 [工具箱] 拖曳至 FlowLayoutPanel 控制項。請注意，Button 控制項已經自動移至第一個 Button 控制項旁邊的位置。如果您的 FlowLayoutPanel 太窄，無法在同一個資料列上納入兩個控制項，則新的 Button 控制項會自動移至下一個資料列。
將數個其他的 Button 控制項從 [工具箱] 拖曳至 FlowLayoutPanel 控制項。繼續放置 Button 控制項，直到控制項換行至下一個資料列。
將 FlowLayoutPanel 控制項的 WrapContents 屬性值變更為 false。請注意，子控制項已經不再流入下一個資料列。相反地，它們流入第一個資料列，並且被裁剪。
將 FlowLayoutPanel 控制項的 WrapContents 屬性值變更為 true。請注意，子控制項再次換行至下一個資料列。
縮短 FlowLayoutPanel 控制項的寬度，直到所有 Button 控制項都移入第一個資料行。
增加 FlowLayoutPanel 控制項的寬度，直到所有 Button 控制項都移入第一個資料行。您可能需要調整表單大小，以容納較大的寬度。

變更流量方向

FlowDirection 屬性可讓您變更控制項的排列方向。您可以從左至右、從右至左、從上至下或從下至上排列子控制項。

若要變更 FlowLayoutPanel 中的流量方向

將 FlowLayoutPanel 控制項的 FlowDirection 屬性值變更為 TopDown。請注意，依據控制項的高度，子控制項已重新排列成一或多個資料行。
調整 FlowLayoutPanel 大小，讓它的高度比 Button 控制項的資料行還短。請注意，FlowLayoutPanel 會重新整理子控制項以排列至下一個資料行。繼續縮短高度，並且注意子控制項排列至連續的資料行。將 FlowLayoutPanel 控制項的 FlowDirection 屬性值變更為 RightToLeft。請注意，子控制項的位置完全相反。在將 FlowDirection 屬性值變更為 BottomUp 時觀察配置。

插入流量中斷點

FlowLayoutPanel 控制項提供 FlowBreak 屬性給它的子控制項。將 FlowBreak 屬性值設定為 true 會導致 FlowLayoutPanel 控制項停止以目前的排列方向配置控制項，並會換行至下一個資料列或資料行。

若要插入流量中斷點

將 FlowLayoutPanel 控制項的 FlowDirection 屬性值變更為 TopDown。
選取在最左邊資料行中間的其中一個 Button 控制項。
將 Button 控制項的 FlowBreak 屬性值設定為 true。請注意，資料行已中斷，在選取的 Button 控制項之後的控制項會排列至下一個資料行。將 Button 控制項的 FlowBreak 屬性設定為 false，以回到原始行為。

使用停駐和錨定來定位控制項

子控制項的停駐和錨定行為，不同於其他容器控制項中的停駐和錨定行為。停駐和錨定都和排列方向中最大的控制項相關。

若要使用停駐和錨定來定位控制項

增加 FlowLayoutPanel 的大小，直到 Button 控制項全部排列於資料行中。
選取最上方的 Button 控制項。增加控制項寬度，使它比其他 Button 控制項寬兩倍。
選取第二個 Button 控制項。將其 Anchor 屬性的值變更為 Right。請注意，控制項已移動，讓右框線與第一個 Button 控制項的右框線對齊。
將其 Anchor 屬性值變更為 Right 和 Left。請注意，它會和第一個 Button 控制項擁有相同的寬度。
選取第三個 Button 控制項。將其 Dock 屬性的值變更為 Fill。請注意，它會和第一個 Button 控制項擁有相同的寬度。

使用邊框距離和邊界排列控制項

您也可以排列 FlowLayoutPanel 中的控制項，方法是變更 Padding 和 Margin 屬性。

Padding 屬性能讓您控制 FlowLayoutPanel 控制項的儲存格內的控制項位置。它會指定子控制項和 FlowLayoutPanel 控制項邊框之間的間距。

Margin 屬性則可讓您控制在控制項之間的間距。

若要使用 Padding 和 Margin 屬性排列控制項

將 FlowLayoutPanel 控制項的 Dock 屬性的值變更為 Fill。如果您的表單夠大，Button 控制便會移至 FlowLayoutPanel 控制項的第一個資料行。
在 [屬性] 視窗中展開 Padding 項目，並將 All 屬性設定為 20，藉此變更 FlowLayoutPanel 控制項的 Padding 屬性值。如需詳細資訊，請參閱逐步解說：使用邊框距離、邊界和 AutoSize 屬性配置 Windows Form 控制項。請注意，子控制項會往 FlowLayoutPanel 控制項中心的方向移動。Padding 屬性的增加值會將子控制項外推，遠離 FlowLayoutPanel 控制項的邊框。
選取 FlowLayoutPanel 中的所有 Button 控制項，然後將 Margin 屬性值設定為 20。請注意在 Button 控制項之間的間距會增加，所以它們會移動得更遠。您可能需要將 FlowLayoutPanel 控制項調整得較大，以檢視所有子控制項。

按兩下工具箱中的控制項以插入該控制項

您可以按兩下 [工具箱] 中的控制項，藉此填入 FlowLayoutPanel 控制項。

若要按兩下工具箱中的控制項以插入該控制項

在 [工具箱] 中，按兩下 Button 控制項圖示。請注意，新的 Button 控制項會出現在 FlowLayoutPanel 控制項中。
在 [工具箱] 中的數個控制項上按兩下。請注意，新控制項會連續出現在 FlowLayoutPanel 控制項中。

繪製外框以插入控制項

您可以插入控制項至 FlowLayoutPanel 控制項，並在儲存格中繪製外框，藉此指定大小。

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

在 [工具箱] 中，請按 Button 控制項圖示。請勿拖曳至表單。
將滑鼠指標移至 FlowLayoutPanel 控制項上。請注意：指標會變成十字形，並且附有 Button 控制項圖示。
按住滑鼠按鈕。
拖曳滑鼠指標以繪製 Button 控制項的外框。當您對於大小感到滿意時，請放開滑鼠按鍵。請注意，Button 會建立在 FlowLayoutPanel 控制項的下一個開放位置。

使用插入列插入控制項

您可以在 FlowLayoutPanel 控制項中的特定位置上插入控制項。當您拖曳控制項至 FlowLayoutPanel 控制項的工作區時，便會出現插入列，指示插入控制項的位置。

若要使用插入號插入控制項

從 [工具箱] 將 Button 控制項拖曳至 FlowLayoutPanel 控制項，並指向兩個 Button 控制項之間的空間。請注意，已繪製插入列，指示 Button 在放入 FlowLayoutPanel 控制項時會被放置的位置。將新的 Button 控制項放入 FlowLayoutPanel 控制項之前，請將滑鼠指標移至附近，觀察插入列移動的方式。
將新的 Button 控制項放入 FlowLayoutPanel 控制項。請注意，新的 Button 控制項不會與其他控制項對齊，因為它的 Margin 屬性具有不同的值。

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

您可以將表單上現有的控制項指派給新的 FlowLayoutPanel 控制項。

若要重設現有控制項的父代

將三個 Button 控制項從 [工具箱] 拖曳到表單上。將它們放置在鄰近的位置，但是不必對齊。
在 [工具箱] 中，請按 FlowLayoutPanel 控制項圖示。請勿拖曳至表單。
將滑鼠指標移動至靠近三個 Button 控制項的位置。請注意：指標會變成十字形，並且附有 FlowLayoutPanel 控制項圖示。
按住滑鼠按鈕。
拖曳滑鼠指標以繪製 FlowLayoutPanel 控制項的外框。繪製三個 Button 控制項周圍的外框。
放開滑鼠按鈕。請注意，三個 Button 控制項會插入至 FlowLayoutPanel 控制項。

後續步驟

您可使用配置面板和控制項的組合，完成複雜的配置。建議另外再研究以下各項：

將其中一個 Button 控制項調整為較大的大小，並且注意此動作對於配置的作用。
配置面板可包含其他配置面板。嘗試將 TableLayoutPanel 控制項放入現有的控制項。
將 FlowLayoutPanel 控制項停駐至父表單。調整表單大小，並注意此動作對於配置的作用。
將其中一個控制項的 Visible 屬性設定為 false，並注意 FlowLayoutPanel 如何重新排列以做為回應。

請參閱

共用方式為