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

  • 發行項

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

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

TableLayoutPanel 會以格線排列內容，提供與 HTML <表格> 項目相似的功能。 其儲存格依資料列和資料行排列，大小可以各不相同。 如需詳細資訊，請參閱 Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel。

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

  • 建立 Windows Forms 專案

  • 以水平或垂直方式排列控制項

  • 變更文字方向

  • 插入流向中斷點

  • 使用填補和邊界排列控制項

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

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

  • 使用插入號以插入控制項

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

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

建立專案

  1. 在 Visual Studio 中，建立名為 "FlowLayoutPanelExample" 的 Windows 應用程式專案 ([檔案]>[新增]>[專案]>[Visual C#] 或 [Visual Basic]>[傳統桌面]>[Windows Forms 應用程式])。

  2. 選取 [表單設計工具] 中的表單。

以水平或垂直方式排列控制項

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

FlowLayoutPanel 控制項可以在父表單的維度變更時，調整子控制項的大小和方向。

使用 FlowLayoutPanel 以水平及垂直方式排列控制項

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

  2. 從 [工具箱] Button將 控制項拖曳至 FlowLayoutPanel。 請注意，它會自動移至 FlowLayoutPanel 控制項的左上角。

  3. 從 [工具箱] Button將另一個 控制項拖曳至 FlowLayoutPanel。 請注意， Button 控制項會自動移至第一個 Button 控制項旁邊的位置。 如果您的 FlowLayoutPanel 太窄無法在同一資料列中容納兩個控制項，新的 Button 控制項會自動移至下一列。

  4. 從 [工具箱] Button將更多的 控制項拖曳到 FlowLayoutPanel。 繼續放置 Button 控制項，直到其中一個換行至下列為止。

  5. 變更 FlowLayoutPanel 控制項的 WrapContents 屬性值為 false。 請注意，子控制項不再移到下一列。 而是改為移至第一列並加以裁剪。

  6. 變更 FlowLayoutPanel 控制項的 WrapContents 屬性值為 true。 請注意，子控制項再次自動換行到下一列。

  7. 減少 FlowLayoutPanel 控制項的寬度，直到所有的 Button 控制項都移入第一個資料行。

  8. 增加 FlowLayoutPanel 控制項的寬度，直到所有的 Button 控制項都移入第一個資料列。 您可能需要調整表單大小以容納較大的寬度。

變更文字方向

FlowDirection 屬性允許您變更控制項的排列方向。 子控制項的排列方向可以由左到右、由右到左、由上到下或由下到上。

在 FlowLayoutPanel 中變更文字方向

  1. 變更 FlowLayoutPanel 控制項的 FlowDirection 屬性值為 TopDown。 請注意，子控制項會視控制項的高度重新排列成一或多個資料行。

  2. 調整 FlowLayoutPanel 的大小，讓高度比 Button 控制項的資料行短。 請注意， FlowLayoutPanel 會重新排列子控制項以移入下一個資料行。 繼續縮短高度，並注意，子控制項會移入接續的資料行。 變更 FlowLayoutPanel 控制項的 FlowDirection 屬性值為 RightToLeft。 請注意，子控制項的位置反了過來。 當您將 FlowDirection 屬性值變更成 BottomUp時，請觀察配置。

插入流向中斷點

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

插入流向中斷點

  1. 變更 FlowLayoutPanel 控制項的 FlowDirection 屬性值為 TopDown。

  2. 在最左邊的資料行中間選取其中一個 Button 控制項。

  3. 將 Button 控制項的 FlowBreak 屬性設為 true。 請注意，資料行已中斷，遵循所選 Button 控制項的控制項會移入下一個資料行。 將 Button 控制項的 FlowBreak 屬性設為 false ，回復原來的行為。

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

子控制項的停駐和錨定行為，和其他容器控制項的行為不一樣。 停駐和錨定是相對於文字方向中的最大控制項。

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

  1. 增加 FlowLayoutPanel 的大小直到 Button 控制項全都排列在資料行中。

  2. 選取最上方的 Button 控制項。 增加它的寬度，使其成為其他 Button 控制項的兩倍寬。

  3. 選取第二個 Button 控制項。 將其 Anchor 屬性的值變更為 Right。 請注意，它已移動，因此它的右框線對齊第一個 Button 控制項的右框線。

  4. 將其 Anchor 屬性值變更為 Right 和 Left。 請注意，它的大小調整成和第一個 Button 控制項一樣寬。

  5. 選取第三個 Button 控制項。 將其 Dock 屬性的值變更為 Fill。 請注意，它的大小調整成和第一個 Button 控制項一樣寬。

使用填補和邊界排列控制項

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

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

Margin 屬性允許您控制控制項之間的間距。

使用填補和邊界屬性排列控制項

  1. 變更 FlowLayoutPanel 控制項的 Dock 屬性值為 Fill。 如果表單夠大， Button 控制項就會移到 FlowLayoutPanel 控制項的第一個資料行。

  2. 展開 [屬性] FlowLayoutPanelPadding 視窗的 Padding 項目，將 屬性設為 20 All ，以變更 控制項的屬性值。 如需詳細資料，請參閱逐步解說：使用 Padding、Margins 和 AutoSize 屬性配置 Windows Forms 控制項。 請注意，子控制項朝 FlowLayoutPanel 控制項的中心移動。 Padding 屬性增加的值會將子控制項推離 FlowLayoutPanel 控制項的邊線。

  3. 選取 Button 的全部 FlowLayoutPanel 控制項，將 Margin 屬性的值設為 20。 請注意， Button 控制項之間的間距增加，所以它們移得更開。 您可能需要調整 FlowLayoutPanel 控制項的大小，大到能看見所有的子控制項。

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

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

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

  1. 在 [工具箱] Button中按兩下控制項圖示。 請注意，新的 Button 控制項隨即出現在 FlowLayoutPanel 控制項中。

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

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

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

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

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

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

  3. 按住滑鼠按鈕。

  4. 拖曳滑鼠指標以繪製 Button 控制項的外框。 如滿意大小，請放開滑鼠按鈕。 請注意， Button 控制項是建立在 FlowLayoutPanel 控制項的下一個開啟位置上。

使用插入列以插入控制項

您可以將控制項插入 FlowLayoutPanel 控制項的特定位置。 當您將控制項拖曳到 FlowLayoutPanel 控制項的用戶端區域中，插入列隨即出現，指出控制項要插入的位置。

使用插入號以插入控制項

  1. 將 Button 控制項從 [工具箱] 拖曳到 FlowLayoutPanel 控制項，指向兩個 Button 控制項之間的空白處。 請注意，已繪製插入列，指出 Button 放入 FlowLayoutPanel 控制項時的擺放位置。 請先移動滑鼠指標，觀察插入列的移動方式，再將新的 Button 控制項放入 FlowLayoutPanel 控制項。

  2. 將新的 Button 控制項放入 FlowLayoutPanel 控制項。 請注意，新的 Button 控制項未對齊其他控制項，因為其 Margin 屬性有不同的值。

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

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

重設現有控制項的父代

  1. 從 [工具箱] Button將三個 控制項拖曳至表單。 將它們放在相鄰的位置，但不要對齊。

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

  3. 將滑鼠指標靠近三個 Button 控制項。 請注意，指標會變成十字形狀並附有 FlowLayoutPanel 控制項圖示。

  4. 按住滑鼠按鈕。

  5. 拖曳滑鼠指標以繪製 FlowLayoutPanel 控制項的外框。 繪製三個 Button 控制項的外框。

  6. 放開滑鼠按鈕。 請注意，三個 Button 控制項都已插入 FlowLayoutPanel 控制項中。

後續步驟

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

  • 放大其中一個 Button 控制項的大小，注意配置的效果。

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

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

  • 將其中一個控制項的 Visible 屬性設為 false ，注意 FlowLayoutPanel 如何回應重訂方向。

另請參閱