TableLayoutPanel 表格布局控件

TableLayoutPanel 表格布局控件

TableLayoutPanel 是一个按行和列进行布局的容器控件，可以将界面划分为几行几列的表格结构。

基本使用

拖拽 TableLayoutPanel 到窗体后，默认是 2 行 2 列的网格布局。可以直接往每个单元格中拖放其他控件，控件会自动停靠在对应单元格内。

编辑行列

点击控件右上角的小三角，选择”编辑行和列”，可以：

• 添加/删除行或列
• 设置行高和列宽
• 设置尺寸类型（Absolute 绝对像素、Percent 百分比、AutoSize 自动适应内容）

尺寸类型说明

类型	说明
Absolute	固定像素值，不会随容器大小变化
Percent	按百分比分配剩余空间
AutoSize	根据单元格内控件的大小自动调整

// 后台代码中设置行列样式
this.tableLayoutPanel1.ColumnStyles.Clear();
this.tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F)); // 50%
this.tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F)); // 50%

this.tableLayoutPanel1.RowStyles.Clear();
this.tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Absolute, 40F));       // 固定40px
this.tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 100F));       // 占满剩余Code language: JavaScript (javascript)

往单元格中添加控件

Button btn = new Button();
btn.Text = "按钮";
btn.Dock = DockStyle.Fill;
this.tableLayoutPanel1.Controls.Add(btn, 0, 0); // 列索引, 行索引（均从0开始）Code language: JavaScript (javascript)

跨行跨列

控件可以跨越多行或多列，类似 HTML 表格中的 rowspan 和 colspan：

// 设计时：选中控件，设置 Dock=Fill，然后在属性中设置
// ColumnSpan（跨列数）和 RowSpan（跨行数）

Button btn = new Button();
btn.Text = "跨两列";
btn.Dock = DockStyle.Fill;
this.tableLayoutPanel1.Controls.Add(btn, 0, 0);
this.tableLayoutPanel1.SetColumnSpan(btn, 2);  // 跨2列
this.tableLayoutPanel1.SetRowSpan(btn, 1);     // 跨1行Code language: JavaScript (javascript)

嵌套布局

可以在单元格中放入 Panel、GroupBox、SplitContainer 等容器控件，再往里面添加其他控件，实现复杂布局。

Panel panel = new Panel();
panel.Dock = DockStyle.Fill;
panel.BorderStyle = BorderStyle.FixedSingle;

Button innerBtn = new Button();
innerBtn.Text = "嵌套按钮";
innerBtn.Location = new Point(10, 10);
panel.Controls.Add(innerBtn);

this.tableLayoutPanel1.Controls.Add(panel, 1, 1);Code language: JavaScript (javascript)

常用属性

属性	说明
ColumnCount	列数
RowCount	行数
ColumnStyles	列样式集合
RowStyles	行样式集合
CellBorderStyle	单元格边框样式
Padding	内边距
GrowStyle	超出行列时的增长行为（AddRows、AddColumns、None）

this.tableLayoutPanel1.CellBorderStyle = TableLayoutPanelCellBorderStyle.Single; // 显示单元格边框
this.tableLayoutPanel1.GrowStyle = TableLayoutPanelGrowStyle.AddRows;            // 超出时自动加行Code language: JavaScript (javascript)

动态调整行列

// 修改第0列的宽度为30%
this.tableLayoutPanel1.ColumnStyles[0].SizeType = SizeType.Percent;
this.tableLayoutPanel1.ColumnStyles[0].Width = 30;

// 修改第1行的高度为固定50px
this.tableLayoutPanel1.RowStyles[1].SizeType = SizeType.Absolute;
this.tableLayoutPanel1.RowStyles[1].Height = 50;Code language: JavaScript (javascript)

获取控件所在的行列

int col = this.tableLayoutPanel1.GetColumn(control);
int row = this.tableLayoutPanel1.GetRow(control);Code language: JavaScript (javascript)

与 FlowLayoutPanel 的对比

对比项	TableLayoutPanel	FlowLayoutPanel
布局方式	行列网格，精确控制位置	流式排列，自动换行
跨行跨列	支持	不支持
适合场景	表单、规整的网格界面	动态数量的控件排列
行列调整	支持百分比/固定/自动	不支持
推荐用途	登录表单、设置页面	图片列表、动态按钮组