C# WinForm FlowLayoutPanel 基本介紹

FlowLayoutPanel 是一個流動的物件容器，會將放入的物件按順序自動依照長寬調整內容排列，如果需要固定排列請看上次的 TableLayoutPanel 篇

基本示範

    
FlowLayoutPanel flowLayoutPanel = new()
{
    Dock = DockStyle.Fill, // 填滿容器 (最大化)
};

this.Controls.Add(flowLayoutPanel);


Button button = new();
flowLayoutPanel.Controls.Add(button); // 將 button 加入至 flowLayoutPanel 中
    

只是 FlowLayoutPanel 預設不會顯示捲動條，需要加上下面這行才會顯示，不然當視窗變小時某些物件很可能就會點不到

    
flowLayoutPanel.AutoScroll = true;
    

改變排列方向

排列方向可以透過 FlowDirection 屬性變更，預設為 LeftToRight

    
// flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight;
flowLayoutPanel.FlowDirection = FlowDirection.TopDown; // 左上開始往下
    

所有可以用的方式為:

• LeftToRight
• TopDown
• RightToLeft
• BottomUp

(預設並沒有辦法在右下)

排列順序

取得當前物件的順序

前面有提到 FlowLayoutPanel 是將放入的物件按順序顯示，那該怎麼指定呢?

    
Button btn = new();
flowLayoutPanel.Controls.Add(btn);
flowLayoutPanel.Controls.SetChildIndex(btn, 5); // 指定順序
    

需要注意的是需要先把物件放入 FlowLayoutPanel (第二行)，不然會拋出下面的錯誤:

    
System.ArgumentException: 'child' 不是此父系的子控制項。
   at System.Windows.Forms.Control.ControlCollection.GetChildIndex(Control child, Boolean throwException)
   at System.Windows.Forms.Control.ControlCollection.SetChildIndexInternal(Control child, Int32 newIndex)
   at System.Windows.Forms.Control.ControlCollection.SetChildIndex(Control child, Int32 newIndex)
   at WinFormsAppFlowLayoutPanel.Form1..ctor() in C:\Users\ruyut\Documents\RiderProjects\2023\test\WinFormsAppFlowLayoutPanel\WinFormsAppFlowLayoutPanel\Form1.cs:line 23
   at WinFormsAppFlowLayoutPanel.Program.Main() in C:\Users\ruyut\Documents\RiderProjects\2023\test\WinFormsAppFlowLayoutPanel\WinFormsAppFlowLayoutPanel\Program.cs:line 14
    

另外 SetChildIndex 是從 0 開始，所以上面範例設定為 5 時應該會跑到第 6 個，且如果當前內部物件數量不足，就只會待在最後一個，後面再有其他成員加入時也不會再替換順序。例如設定為第 10 個，但當前只有兩個，就只會排在第二個，等後續加到總共有 10 個時也不會被移動到第 10 個，而是會待在第二個，除非重新指定。

取得當前物件的順序

    
btn.Click += (_, _) =>
{
    MessageBox.Show("index: " + flowLayoutPanel.Controls.IndexOf(btn));
};