GUI工具 - TableLayoutPanel 類別

在winform程式裡, GUI畫面的佈局和排版,包含對齊、最大化、靠左靠右、比例分配等工作, 常常占用大量的時間。微軟提供了TableLayoutPanel的工具, 除了可以輕鬆布局畫面的比例分配, 用戶也可以自由調整在上面的控制項大小

TableLayoutPanel 類別

MSDN介紹

按照字面意思非常清楚, 就是以表格的形式作為畫面布局, 幾個比較基本的初階功能包含 (1) 自定義m*n的表格布局 (2) 每行/每列的長度寬度皆可調整, 調整包是包含pixel或是比例。

操作方式很簡單, 只要拖拉這個工具到winform畫面上, 接著把想要的控制項拖進tablelayoutpanel就可以了。TableLayoutPanel還有一個功能, 就是放置在上頭的控制項, 會多出兩個屬性叫做"RowSpan"跟"ColumnSpan", 這兩個屬性用來設定此控制項橫跨多個row/column的行為, 例如我們常用的計算機布局, "+"跟"0"還有"Enter"可以透過這兩個屬性占用多個row/column

• "+"按鈕位於(row,column)=(1,3)的位置, row span值為2

• "Enter"按鈕是在(3,3)位置, row span值為2

• "0"按鈕則是在(4,0)位置, column span值為2

TableLayoutPanel也可以透過程式的方式來操作, 首先必須要先將控制項添加到tablelayoutpanel的Controls屬性中, 接著可以用以下的方法操作

• GetControlFromPosition - 返回指定row column的Control

• SetRow - 設定指定Control的row索引值 SetColumn - 設定指定Control的column索引值

• SetRowSpan - 設定指定Control的row橫跨數目

• SetColumnSpan - 設定指定Control的column橫跨數目

參考程式碼如下

private void Form1_Load(object sender, EventArgs e)
{
    //Create TableLayoutPanel
    TableLayoutPanel parent = new TableLayoutPanel();
    parent.Width = 320;
    parent.Height = 320;
    parent.ColumnCount = 4;
    parent.RowCount = 5;

    //Adjust the spacing for each row and column
    for (int i = 0; i < parent.RowCount; i++)
        parent.RowStyles.Add(new RowStyle() { Height = 20, SizeType = SizeType.Percent });

    for (int j = 0; j < parent.ColumnCount; j++)
        parent.ColumnStyles.Add(new ColumnStyle() { Width = 25, SizeType = SizeType.Percent });

    //Add tablelayoutpanel to the form GUI
    this.Controls.Add(parent);

    Control childControl;
    //Add childcontrol to parent 
    parent.Controls.Add(new Button() { Text = "NumLock", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "/", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "*", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "-", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "7", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "8", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "9", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "+", Dock = DockStyle.Fill });
    //get the child control from specified position, and assign the rowspan value
    childControl = parent.GetControlFromPosition(3, 1);
    parent.SetRowSpan(childControl, 2);
    parent.Controls.Add(new Button() { Text = "4", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "5", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "6", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "1", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "2", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "3", Dock = DockStyle.Fill });
    parent.Controls.Add(new Button() { Text = "Enter", Dock = DockStyle.Fill });
    childControl = parent.GetControlFromPosition(3, 3);
    parent.SetRowSpan(childControl, 2);
    parent.Controls.Add(new Button() { Text = "0", Dock = DockStyle.Fill });
    childControl = parent.GetControlFromPosition(0, 4);
    parent.SetColumnSpan(childControl, 2);
    parent.Controls.Add(new Button() { Text = ".", Dock = DockStyle.Fill });

}