C# WinForm TableLayoutPanel 基礎教學

TableLayoutPanel 是表格形式的物件容器，能夠讓我們方便的排列物件

動態建立 TableLayoutPanel

    
TableLayoutPanel tableLayoutPanel = new();
tableLayoutPanel.AutoSize = true; // 自動調整大小
this.Controls.Add(tableLayoutPanel);
    

將物件新增至 TableLayoutPanel 中

我們可以使用 Controls.Add 來將物件依序加入至 TableLayoutPanel ，每個加入的會放置在新的一行 (row) 中

    
Label label1 = new()
{
    Text = "Label1",
};

Label label2 = new()
{
    Text = "Label2",
};

Label label3 = new()
{
    Text = "Label3",
};

tableLayoutPanel.Controls.Add(label1);
tableLayoutPanel.Controls.Add(label2);
tableLayoutPanel.Controls.Add(label3);
    

指定放置位置

TableLayoutPanel 是表格形式的容器，我們也可以手動指定要把物件放在哪一格中，傳入參數依序是 物件、左右位置、上下位置 (從 0 開始)

    
Label label1 = new()
{
    Text = "Label1",
};

Label label2 = new()
{
    Text = "Label2",
};

Label label3 = new()
{
    Text = "Label3",
};

tableLayoutPanel.Controls.Add(label1, 0, 0);
tableLayoutPanel.Controls.Add(label2, 0, 1);
tableLayoutPanel.Controls.Add(label3, 1, 0);
    

那如果有一整行或一整列都沒有物件呢？

    
tableLayoutPanel.Controls.Add(label1, 0, 0);
tableLayoutPanel.Controls.Add(label2, 0, 1);
tableLayoutPanel.Controls.Add(label3, 5, 0);
    

看起來好像都沒有差別，感覺似乎被省略了

不過如果我們把隔線打開，就會發現其實是有在指定的位置，只是看不出來罷了

    
tableLayoutPanel.CellBorderStyle = TableLayoutPanelCellBorderStyle.OutsetPartial;

tableLayoutPanel.Controls.Add(label1, 0, 0);
tableLayoutPanel.Controls.Add(label2, 0, 1);
tableLayoutPanel.Controls.Add(label3, 5, 0);
    

跨欄置中

可以透過 SetColumnSpan 和 SetRowSpan 來指定要橫跨的欄或列數量

    
Label label1 = new()
{
    Text = "Label1",
};

Label label2 = new()
{
    Text = "Label2",
};
tableLayoutPanel.Controls.Add(label1, 0, 0);
tableLayoutPanel.Controls.Add(label2, 1, 0);

Button button1 = new()
{
    Text = "Button1",
    Dock = DockStyle.Fill,
    Margin = new Padding(10),
};
tableLayoutPanel.Controls.Add(button1, 0, 1);
tableLayoutPanel.SetColumnSpan(button1, 2);

Button button2 = new()
{
    Text = "Button2",
    Dock = DockStyle.Fill,
    Margin = new Padding(10),
};
tableLayoutPanel.Controls.Add(button2, 2, 0);
tableLayoutPanel.SetRowSpan(button2, 2);
    

格線顯示效果

我們來動態產生一些 Label ，方便查看 TableLayoutPanel 的排版效果：

    
for (int x = 0; x < 5; x++)
{
    for (int y = 0; y < 5; y++)
    {
        Label label = new()
        {
            Text = $"({x},{y})",
        };
        tableLayoutPanel.Controls.Add(label, x, y);
    }
}
    

目前上面的圖片是沒有開啟格線，也就是 CellBorderStyle = TableLayoutPanelCellBorderStyle.None ，讓我們來看看每種格線的效果: