[C#] 實作流式佈局 - FlowLayoutPanel

在開發 C# Windows Forms 應用程式時，我們經常需要將多個控制項以流式佈局排列，以便在不同大小的視窗或面板中適應佈局變化。這時，FlowLayoutPanel 是一個非常實用的容器控制項，它可以自動調整子控制項的位置，使其按照流式佈局排列。本篇教學將帶你透過一個簡單的例子，學會如何在 C# 中使用 FlowLayoutPanel。

Árpád Czapp on Unsplash

設定 FlowLayoutPanel 的屬性

在 MainForm_Load 事件處理方法中，我們將設定 FlowLayoutPanel 的一些屬性，以確保流式佈局正常運作。以下是幾個重要的屬性：

private void MainForm_Load(object sender, EventArgs e)
{
     // 建立 FlowLayoutPanel 控制項
      FlowLayoutPanel flowLayoutPanel1 = new FlowLayoutPanel();
      flowLayoutPanel1.FlowDirection = FlowDirection.LeftToRight;
      flowLayoutPanel1.WrapContents = true;
      flowLayoutPanel1.AutoScroll = true;
      flowLayoutPanel1.Dock = DockStyle.Fill; // 佔滿整個視窗
}

• FlowDirection 屬性指定子控制項排列的方向。在這裡，我們選擇從左到右排列。
• WrapContents 屬性指定是否在達到容器邊界時換行。這裡我們設定為 true，這樣當視窗大小不足容納所有子控制項時，會換行排列。
• AutoScroll 屬性指定當容器不足以顯示所有子控制項時，是否自動顯示捲軸。這樣，即使子控制項超出視窗範圍，我們也可以捲動查看它們。

設定子控制項的大小和事件處理方法

using System;
using System.Windows.Forms;

namespace FlowLayoutPanelDemo
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
            CreateControls();
        }

        private void CreateControls()
        { 
            // 建立按鈕控制項
            Button button1 = new Button();
            button1.Text = "按鈕1";
            button1.Size = new System.Drawing.Size(100, 30);
            button1.Click += new EventHandler(button_Click);

            Button button2 = new Button();
            button2.Text = "按鈕2";
            button2.Size = new System.Drawing.Size(100, 30);
            button2.Click += new EventHandler(button_Click);

            Button button3 = new Button();
            button3.Text = "按鈕3";
            button3.Size = new System.Drawing.Size(100, 30);
            button3.Click += new EventHandler(button_Click);

            // 加入子控制項到 FlowLayoutPanel
            flowLayoutPanel1.Controls.Add(button1);
            flowLayoutPanel1.Controls.Add(button2);
            flowLayoutPanel1.Controls.Add(button3);

            // 加入 FlowLayoutPanel 到主視窗
            this.Controls.Add(flowLayoutPanel1);
        }        
    }
}

實作子控制項的事件處理方法

最後，我們為子控制項的事件處理方法 button_Click 添加一些簡單的邏輯。

private void button_Click(object sender, EventArgs e)
{
    // 在這裡可以寫點擊按鈕後的處理邏輯
    MessageBox.Show($"你按下了按鈕：{((Button)sender).Text}");
}

這將使你的應用程式更靈活地適應不同大小的視窗或面板，並且可以自動調整子控制項的位置。這只是 FlowLayoutPanel 的基本用法，你可以根據你的需求添加更多子控制項和處理更多事件，以建立更豐富和互動的應用程式。