動態產生表格 (TableLayout)
透過 UI 來產生 TableLayout 相當的方便,但也是有情非得以需要透過程式來產生 TableLayout。
首先建立一個測試範本環境,畫面上配置如下圖。
由使用者自行輸入行與列的數量,然後點選建立表格後,在下方的表格上產生指定的行與列的表格;按下清除表格鍵後將下方表格的行與列全數清空。為了顯示表格的行列資料,因此設定要繪製表格內的框線,CellBorderStyle 為 Single。
物件名稱設定如下:
行數量:txtColumnCount、列數量:txtRowCount、建立表格鍵:btnCreateTable、清除表格鍵:btnClearTable、下方動態表格:DynamicTable。
基本上行與列的輸入在這個範例中並沒有做任何的檢查,所以輸入的時後務必輸入「正整數」。只有在按下建立表格鍵之後,判斷行與列的資料是否為空值。
程式一執行之後,就先對表格進行初始化 (InitDynamicTable) 的動作。
private void InitDynamicTable()
{
DynamicTable.Controls.Clear();
DynamicTable.RowStyles.Clear();
DynamicTable.ColumnStyles.Clear();
}
將 DynamicTable 下子控制項全數清出,並且將行與列的格式設定也全數清除。
按下建立表格鍵
private void btnCreateTable_Click(object sender, System.EventArgs e)
{
if ((txtColumnCount.Text.Trim() == "") || (txtRowCount.Text.Trim() == "")) return;
InitDynamicTable();
CreateColumn();
CreateRow();
CreateContent();
}
簡單的判斷過後,就先初始化表格,然後再依序建立行(Column)資料、列(Row)資料,最後再新增內容資料。
若是按下清除表格鍵
private void btnClearTable_Click(object sender, System.EventArgs e)
{
InitDynamicTable();
}
就是很單純的將表格初始化。
產生行(Column)資料、列(Row)資料
private void CreateColumn()
{
int ColumnCount = int.Parse(txtColumnCount.Text.Trim());
DynamicTable.ColumnCount = ColumnCount;
for (int i = 0; i < ColumnCount; i++)
{
DynamicTable.ColumnStyles.Add(new ColumnStyle(SizeType.Percent,100));
}
}
private void CreateRow()
{
int RowCount = int.Parse(txtRowCount.Text.Trim());
DynamicTable.RowCount = RowCount;
for (int i = 0; i < RowCount; i++)
{
DynamicTable.RowStyles.Add(new ColumnStyle(SizeType.Percent, 100));
}
}
SizeType 可設定為 Absolute 指定值、Percent 百分比或是 AutoSize 自動調整。
除非有特別的需求,建議全部設定為百分比設定值為 100,讓系統自動判定大小。這樣比使用 AutoSize 好用多了。當然如果有更多的設定想要變更的話,那麼就先產生一個 ColumnStyle,將所有相關設定完成後,再新增到 DynamicTable 也是可以的。
接下來為了顯示產生的表格結果,在每一個 Cell 裡面都新增了一個 Label 控制項,Anchor 錨定到左與右,控制項的文字定位在正中間,文字顯示內容為 ( ColumnIndex , RowIndex),大小則設定為自動調整。
private void CreateContent()
{
int ColumnCount = int.Parse(txtColumnCount.Text.Trim());
int RowCount = int.Parse(txtRowCount.Text.Trim());
for (int i = 0; i < RowCount; i++)
{
for (int j = 0; j < ColumnCount; j++)
{
Label ExampleLabel = new Label();
ExampleLabel.Name = "Label_" + i.ToString() + "_" + j.ToString();
ExampleLabel.Text = "(" + i.ToString() + "," + j.ToString() + ")";
ExampleLabel.Anchor = AnchorStyles.Left | AnchorStyles.Right;
ExampleLabel.AutoSize = true;
ExampleLabel.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
DynamicTable.Controls.Add(ExampleLabel);
DynamicTable.SetCellPosition(ExampleLabel, new TableLayoutPanelCellPosition(j, i));
}
}
}
執行結果,建立 9 * 4 的表格
如果在新增 Content 時,需要合併資料格時,則在設定 CellPosition 就必需設定為左上角的地方,然後要行(Column)合併就使用 DynamicTable.SetColumnSpan(ExampleLabel, 合併的行數) 或 DynamicTable.SetRowSpan(ExampleLabel, 合併的列數)。
這就是簡簡單單透過程式來建立 TableLayout 的方式。
程式是運氣與直覺堆砌而成的奇蹟。
若不具備這兩者,不可能以這樣的工時實現這樣的規格。
修改規格是對奇蹟吐槽的褻瀆行為。
而追加修改則是相信奇蹟還會重現的魯莽行動。