【實戰】打造可縮放 WinForms 視窗：用 TableLayoutPanel 實現控件自適應佈局

| CSharp | 15 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1129

在 WinForms 開發中，你是否遇過這些情況？

  • 「拉大視窗之後，控件還卡在原地？」

  • 「表單上的文字輸入框太短，不好看？」

  • 「不同螢幕解析度一打開就整個炸開？」

別怕！這篇教你用 TableLayoutPanel，輕鬆搞定自適應佈局 + 可縮放窗體，保證你的 UI 又整齊又美觀。

✅ 最終目標

  • 視窗可以自由縮放（Sizable）

  • 控件會自動跟著縮放，不會固定死大小

  • 表單看起來整齊對齊，自然美觀

如下圖 👇

| Label      | [       自動調整的 TextBox        ] |
| Label      | [       自動調整的 TextBox        ] |
| Button（居中）                                  |

🧰 所需工具

  • Visual Studio（任意版本）

  • Windows Forms 專案 (.NET Framework 或 .NET Core/.NET 5+)

  • TableLayoutPanel 控件

🛠 步驟 1：建立一個可縮放的 Form

  1. 打開 Visual Studio，新建一個 WinForms Form。

  2. 設定 Form 的屬性：

    • FormBorderStyle = Sizable（預設是）

    • StartPosition = CenterScreen

    • MinimumSize 設一個基本尺寸（例如 600x300）

🛠 步驟 2：拖入 TableLayoutPanel 佈局控件

  1. 從工具箱拖一個 TableLayoutPanel 到窗體上

  2. 設 Dock = Fill → 滿版填充

  3. 設 ColumnCount = 2（左邊 Label，右邊 TextBox）

  4. 點 Smart Tag ➤ Edit Columns...

    • 第一欄：SizeType = AutoSize

    • 第二欄：SizeType = Percent，Width = 100%

🛠 步驟 3：拖控件進格子裡

控件 加入位置 附註
Label「姓名」 Column=0, Row=0 無需 Dock
TextBox Column=1, Row=0 設 Dock=Fill
Label「Email」 Column=0, Row=1 無需 Dock
TextBox Column=1, Row=1 設 Dock=Fill
Button「送出」 ColumnSpan=2, Row=2 設 Anchor=Middle

小提示：

  • 拖控件時直接拖到 TableLayoutPanel 中格子

  • Button 想置中？設 Anchor = None 或用 Dock = Top + Margin

🛠 步驟 4：測試縮放效果

  1. 執行程式

  2. 拖拉視窗改變大小

  3. 觀察 TextBox 是否會自動變寬

  4. Button 是否居中、不歪掉

👏 做到了，你的 UI 就具備了適應性！

🎯 延伸技巧

目標 做法
控件橫跨多欄 SetColumnSpan(control, 數字) 或屬性面板設定
控件上下對齊 設 Anchor = Top, Bottom 或 Dock = Fill
想看到格子線來對齊 設 CellBorderStyle = Single
巢狀佈局 TableLayoutPanel 裡再塞 TableLayoutPanel 👍

📦 完整小結

技術點 用途
TableLayoutPanel 建立彈性佈局，支援跨欄跨列
Anchor / Dock 控件自動對齊與伸縮
% 和 AutoSize 靈活設計行列尺寸
ColumnSpan 控件跨欄排版（常用在按鈕、說明文字等）

📄 附完整範例程式碼（C#）

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var layout = new TableLayoutPanel
        {
            ColumnCount = 2,
            RowCount = 3,
            Dock = DockStyle.Fill
        };

        layout.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize));
        layout.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100F));

        layout.RowStyles.Add(new RowStyle(SizeType.AutoSize));
        layout.RowStyles.Add(new RowStyle(SizeType.AutoSize));
        layout.RowStyles.Add(new RowStyle(SizeType.AutoSize));

        var lblName = new Label() { Text = "姓名：" };
        var txtName = new TextBox() { Dock = DockStyle.Fill };
        var lblEmail = new Label() { Text = "Email：" };
        var txtEmail = new TextBox() { Dock = DockStyle.Fill };
        var btnSubmit = new Button() { Text = "送出", Anchor = AnchorStyles.None };

        layout.Controls.Add(lblName, 0, 0);
        layout.Controls.Add(txtName, 1, 0);
        layout.Controls.Add(lblEmail, 0, 1);
        layout.Controls.Add(txtEmail, 1, 1);
        layout.Controls.Add(btnSubmit, 0, 2);
        layout.SetColumnSpan(btnSubmit, 2);

        this.Controls.Add(layout);
    }
}

✅ 就這麼簡單，視窗就能漂亮又能縮放！

使用 TableLayoutPanel 是設計 WinForms UI 時的必備技能。與其手動調整 Left/Top，不如一次做好格子規劃，讓控件自己對齊、自己縮放、自己填滿。

有了這一招，以後再也不用怕 UI 爆版啦 🎉

This article was last edited at