【33】C# WinForm入门到精通 ——表格布局器TableLayoutPanel【属性、方法、事件、实例、源码】

WinForm 是 Windows Form 的简称，是基于 .NET Framework 平台的客户端（PC软件）开发技术，是 C# 语言中的一个重要应用。
.NET 提供了大量 Windows 风格的控件和事件，可以直接拿来使用。
本专栏内容 是按照标题序号逐渐深入的，如有不懂的基础问题，可看前面教程。
在介绍属性的时候，会展示一些用法、代码、实例、截图 ，这样看起来更清晰，免得直接看最后综合实例会有些懵

文章目录

[1 表格布局器TableLayoutPanel------属性](#1 表格布局器TableLayoutPanel——属性)
- [1.1 Name、AllowDrop、AllowDrop](#1.1 Name、AllowDrop、AllowDrop)
- [1.2 AutoScroll](#1.2 AutoScroll)
- [1.3 AutoScrollMargin、AutoScrollMinSize](#1.3 AutoScrollMargin、AutoScrollMinSize)
- [1.4 AutoSize、AutoSizeMode](#1.4 AutoSize、AutoSizeMode)
- [1.5 GrowAndshrink、AutoSize](#1.5 GrowAndshrink、AutoSize)
- [1.6 BackColor、Backgroundlmage、BackgroundlmageLayout](#1.6 BackColor、Backgroundlmage、BackgroundlmageLayout)
- [1.7 CausesValidation](#1.7 CausesValidation)
- [1.8 CellBorderStyle](#1.8 CellBorderStyle)
- [1.9 ColumnCount](#1.9 ColumnCount)
- [1.10 ColumnStyles](#1.10 ColumnStyles)
- - [10.4.1 绝对](#10.4.1 绝对)
  - [10.4.2 百分比](#10.4.2 百分比)
  - [10.4.3 自动调整大小](#10.4.3 自动调整大小)
- [1.11 ContextMenuStrip、Cursor、Dock、Enabled](#1.11 ContextMenuStrip、Cursor、Dock、Enabled)
- [1.12 Font](#1.12 Font)
- [1.13 ForeColor](#1.13 ForeColor)
- [1.14 GrowStyle](#1.14 GrowStyle)
- [1.15 AddColumns、AddRows](#1.15 AddColumns、AddRows)
- [1.16 Fixedsize](#1.16 Fixedsize)
- [1.17 Location、Locked、Margin、MaximumSize、MinimumSize、Modifiers、Padding](#1.17 Location、Locked、Margin、MaximumSize、MinimumSize、Modifiers、Padding)
- [1.18 RightToLeft](#1.18 RightToLeft)
- [1.19 RowCount](#1.19 RowCount)
- [1.20 RowStyles](#1.20 RowStyles)
- [1.21 Size、TabIndex、TabStop、Tag、UseWaitCursor、Visible](#1.21 Size、TabIndex、TabStop、Tag、UseWaitCursor、Visible)
[2 事件](#2 事件)
[3 自定义TableLayoutPanel](#3 自定义TableLayoutPanel)

1 表格布局器TableLayoutPanel------属性

我们在开发winform程序的过程中首先要知道在哪种情况下用哪种控件，

那么我们什么时候使用TableLayoutPane呢?

当我们需要对父件进行分隔 ，并且按照指定的行数、列数进行分隔时，这时候优先考虑 使用TableLayoutPanel控件

TableLayoutPanel的属性很多，下面一一介绍

1.1 Name、AllowDrop、AllowDrop

Name 用于获取控件对象
AllowDrop 指示用户是否可以拖动数据到Panel_上
Anchor 锚定控件对于父控件的位置

1.2 AutoScroll

AutoScrol为true时，指示控件尺寸大于子Pane时是否出现滚动条，该属性在TableLavoutPanel上起作用的前提是调用以下两个方法:

csharp 复制代码

  tableLayoutPanel1.RowStyles.Clear();
  tableLayoutPanel1.ColumnStyles.Clear();

就像下面一个2*2的TableLayoutPanel，你可以理解成，他来是一个Panel，然后强制分成了4块，变成了2行2列，然后这4个部分(这里称之为子Panel)，里面都可以放入控件，并且只能放入一个控件，比如我在每个子Panel中放入一个Buton，如下图:

通过属性BackColor可以更改控件的背景颜色

然后我在Form6的构造函数中加入以下代码

csharp 复制代码

public Form6()
{
	InitializeComponent();
	tableLayoutPanel1.RowStyles.Clear();
	tableLayoutPanel1.ColumnStyles.Clear();
}

然后我在button1(tableLayoutPanel1左上角第一个Button)注册一个鼠标单击事件，在事件中改变buton1的大小，如下代码:

csharp 复制代码

 private void button1_Click(object sender, EventArgs e)
 {
     button1.Size = new Size(1000, 1000);
 }

运行之后，点击button1，会变大

1.3 AutoScrollMargin、AutoScrollMinSize

AutoScrollMargin

该属性经过测试无效
AutoScrollMinSize
- 假设以水平方向为例，该属性指的就是滚动条产生以后，从左边拉到最右边代表的最小控件宽度
- 假设以垂直方向为例，该属性指的就是滚动条产生以后，从上边拉到最下边代表的最小控件高度:

该属性生效的前提是，以下代码必须先执行:

csharp 复制代码

AutoScroll=true；
tableLayoutPanel1.RowStyles.Clear();
tableLayoutPanel1.ColumnStyles.Clear();

1.4 AutoSize、AutoSizeMode

AutoSize

当子Panel中的控件尺寸大小改变时，TableLayoutPanel的大小是否也跟着改变
AutoSizeMode

AutoSizeMode有效的前提是: AutoSize属性为true

1.5 GrowAndshrink、AutoSize

GrowAndshrink
控件根据它的内容增大或缩小，也就是可大可小。
GrowOnly
控件可以根据其内容任意增大，但不会缩小至小于它的 Size 属性值。只能增大，不能变小

1.6 BackColor、Backgroundlmage、BackgroundlmageLayout

BackColor

改变背景色，可直接在属性窗口的箭头所指下拉框选择你想设置的颜色
Backgroundlmage

该属性用于设置TableLayoutPanel的背景图像
BackgroundlmageLayout

属性用于设置TableLavoutPanel的背景图像的布局方式

1.7 CausesValidation

指示是否引发验证事件，一般情况下使用不到

1.8 CellBorderStyle

指示单元格边框样式，一共有7中样式

None 无边框。
Single 1 单行边框
Inset 单线凹陷边框
InsetDouble 双线凹陷边框
Outset 单线凸起边框。
OutsetDouble 双线凸起边框.
OutsetPartial 包含凸起部分的单线边框

七种样式的效果如下:

1.9 ColumnCount

设置TableLayoutPanel总共有多少列，下图中左图是2列，右图是3列

1.10 ColumnStyles

用于编辑所有列的属性，点击箭头所指的"三个点"就弹出一个编辑框，注意实际上在代码中不是Columns属性，而是ColumnStyles属性，如下图:

这上面弹出的窗体中我们做以下事情

1 点击"添加"按钮来添加列
2 点击"删除"按钮删除列

鼠标左键选中列，就能点击"删除"按钮
3 点击"插入"按钮插入列
4 设置该列的大小类型；列的大小类型有三种，分别如下:

10.4.1 绝对

绝对代表的是列的宽度是固定的，不论TableLavoutPane的宽度如何变化，该列的宽度也不改变，单位是像素从工具箱中拖四个Button到TableLayoutPanel中，并且将四Button的Dock唐性设置为Fill，如下图:

然后将Column1，也就是从左往右数第1列的类的大小类型设置为绝对，并且赋值为20像素;然后Clumn2也设置成绝对20。

运行软件以后，效果如下:

我们会发现第一列的宽度变成了绝对20，但是第二列不是绝对20，这是为啥呢?

这是因为TableLayoutPanel的总宽度是不变的，假设是100，TableLayoutPanel总共有两列，第一列已经设置为20了，虽然第二列也设置成20，但是这不符合实际情况，第二列宽度实际应该为总宽度100减去第一列的20=80，所以就相当于第二列设置的宽度实际上已经失效了所以对于列来说，

假设一共有5列，前四列的宽度已经设置好了大小，那么最后一列的宽度实际上是不需要设置的，系统会自动用总宽度减去其余列的宽度

10.4.2 百分比

百分比的意思是，该列的宽度占TableLayoutPanel总宽度的比重，总宽度是100%，如果设置成50%，就说明该列宽度等于总宽度的半，如下:

设置第一列的宽度为25%，第二列为绝对20，运行软件后，效果如下:

我们会惊奇的发现，明明我设置了第一列为25%，按理说第一列应该为总宽度的1/4才对呀，这是为啥呢?

这是因为我们设置的每个列的大小总的加起来要等于总列宽，比如假设总宽度为100，但是**第一列为25%(也就是25)，第二列为绝对20，那么这两列宽度加起来等25+20=45，**这是不等于总宽度100的，所以这是无效的组合，

如果第二列为20，第一列我认为25%是无效的，实际上第一列是80，那么这两列的宽度加起来就等于100，

这里就要注意系统的原则，系统认为绝对宽度的优先级大于 百分比宽度，比如刚才为什么不让第一列25%有效，第二列绝对20失效呢?而是让第二列绝对20有效，第一列25%失效了。这就是系统认为的优先让绝对宽度有效。
那么我们如何让25%真的有效呢?

那就需要我们自己组合每一列的宽度，比如第一列设置成25%，第二列我设置成75%，这样第一列和第二列加起来就等于100%(就是等这样的组合就是有效的，而不是依靠系统来自动决定哪些列宽度有效。效果如下:

这样我们就发现第一列等于总宽度的25%，第二列等于总宽度的75%。

10.4.3 自动调整大小

我们可以将列的宽度设置成自动调整大小，这样系统就会根据子Panel中控件的实际大小来调整列的宽度，效果如下

1.11 ContextMenuStrip、Cursor、Dock、Enabled

ContextMenuStrip 鼠标右击时弹出的关联的上下文菜单
Cursor 鼠标移动到控件上显示的光标
Dock 停靠在父控件的位置
Enabled 是否启用该控件，false时事件都不能触发

1.12 Font

用于设置TableLayoutPanel中的子控件的Font属性，效果如下改变Font属性以后，会发现TableLayoutPanel中的四个Button的Font属性都改变了

1.13 ForeColor

前景色 ，也就是TableLayoutPanel中所有子控件的字体颜色，如下图:ForeColor为Red时，会发现TableLayoutPanel中的四个Button的Fore属性都改变了

1.14 GrowStyle

GrowStyle的作用是当你往TableLayoutPanel中添加控件时，当控件的数量超出TableLayoutPanel所能包合的子控件时,共有三种情况:

TableLayoutPanel是增加行数让让多余的控件包含到TableLayoutPanel、
还是增加列数来让多余的控件包含到TableLayoutPanel、
还是不允许添加多余的控件，

1.15 AddColumns、AddRows

AddColumns TableLayoutPanel 在已满之后自动增加列

假设这个TableLayoutPanel 为2行2列，然后如果我想使用"ctr +v"与贴一个button1到TableLavoutPanel中，则会多出一行
AddRows TableLayoutPanel 在已满之后自动增加行

假设这个TableLayoutPanel 为2行2列，然后如果我想使用"ctr +v"与贴一个button1到TableLavoutPanel中，则会多出一行

1.16 Fixedsize

TableLayoutPanel 在已满之后不允许获取其他行或列，并且抛出异常，如下图:假设这TableLayoutPanel 为2行2列，然后如果我想使用"ctr +V粘贴一个buton1到TableLayoutPanel 中，会弹出下面的窗体:

1.17 Location、Locked、Margin、MaximumSize、MinimumSize、Modifiers、Padding

Location 左上角的坐标相对于父控件左上角坐标的相对位置
Locked 是否锁住控件，从而控件不能移动也不能调整大小
Margin 相对于父控件一般是flowlayoutpanel、tablelayoutpanel的大小
MaximumSize 控制Panel最大尺寸
MinimumSize 控制Panel的最小尺寸
Modifiers 控件访问级别
Padding 控制TableLayoutPanel中子控件的字体和控件边框的间距，，一般都是0，可以控制和上下左右边缘的距离

1.18 RightToLeft

是否从右往左排列，效果如下图:

能看到button的排列顺序改成从右往左了

1.19 RowCount

设置行的数量，下图中的左图是2行，右图是3行

1.20 RowStyles

用于编辑所有行的属性，主要用于设置每一行占总高度的比例，其拥有的特性比如，绝对高度优先于百分比高度和列是相同的，参考ColumnStyles属性，并且对于添加子控件除了在设计器中添加外，同样也可以使用代码添加，例子如下:

csharp 复制代码

	tableLayoutPanel1.BackColor = Color.Blue;//设置tableLayoutPanel1的背景颜色为蓝色
    Button[] buttons = new Button[] { new Button(), new Button(), new Button() };//声明一个buttons的集合，集合中有三个button
    buttons.ToList().ForEach((item) => { item.Dock = DockStyle.Fill; item.BackColor = Color.LimeGreen; });//将所有button的Dock属性设置为DockStyle.Fill，将button的背景色设置为绿色
    tableLayoutPanel1.RowCount = 3;//设置tableLayoutPanel1一共有三行
    tableLayoutPanel1.RowStyles.Clear();//清除以前RowStyles的属性
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.3f));//添加第一行，行类型为百分比，大小为33.3%
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.3f));//添加第二行，行类型为百分比，大小为33.3%
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.4f));//添加第三行，行类型为百分比，大小为33.4%

    tableLayoutPanel1.Controls.Add(buttons[0], 0, 0);//将buttons集合中的的第一个button1添加到第0行0列的位置
    tableLayoutPanel1.Controls.Add(buttons[1], 0, 1);//将buttons集合中的的第一个button1添加到第1行0列的位置
    tableLayoutPanel1.Controls.Add(buttons[2], 0, 2);//将buttons集合中的的第一个button1添加到第2行0列的位置



    Button button1 = (Button)tableLayoutPanel1.GetControlFromPosition(0, 0);//获取第0行0列的控件
    button1.Text = "1";//设置Text属性为"1"
    button1 = (Button)tableLayoutPanel1.GetControlFromPosition(0, 1);//获取第1行0列的控件
    button1.Text = "2";//设置Text属性为"2"
    button1 = (Button)tableLayoutPanel1.GetControlFromPosition(0, 2);//获取第2行0列的控件
    button1.Text = "3";//设置Text属性为"3"

1.21 Size、TabIndex、TabStop、Tag、UseWaitCursor、Visible

Size 改变控件尺寸
TabIndex 控件在父控件上的索引
TabStop 对Panel貌似没什么作用，但是对于Button有作用
Tag 绑定数据使用
UseWaitCursor 控制控件及其子控件是否使用等待光标
Visible 是否显示控件

2 事件

AutoSizeChanged AutoSize属性改变时触发
BackColorChangedBackColor属性改变时触发
BackgroundlmageChangedBackgroundlmage改变时触发
CausesValidationChangedCausesValidation属性改变时触发
ChangeUlCues在显示或者隐藏聚焦框时或者键盘提示下划线触发
Click鼠标单击时触发
ClientSizeChangedClientSize属性改变时触发
ContextMenuStripChangedContextMenuStrip改变时触发
ControlAdded为Panel添加控件时触发
ControlRemoved将Panel中控件移除时触发
CursorChangedCursor属性改变时触发
CellPaint在重绘单元格时发生，这里的单元格就是我之前说的子Pane
DockChangedDock属性改变时触发
DoubleClick鼠标双击时触发
EnabledChangedEnable属性改变时触发
Enter用鼠标、Tab键等控制焦点有关
FontChangedFont属性改变时触发
ImeModeChangedImeMode属性值改变时触发
.Layout改变控件布局时发生，比如改变控件Size属性，使子控件显示、隐藏、添加、删除子控件，改变子控件的大小、位置时触发
Leave和用鼠标、Tab键等控制焦点有关
LocationChangedLocation属性改变时触发
MarginChangedMargin属性改变触发
MouseClick鼠标单击后触发
MouseDoubleClick鼠标双击后触发
MouseDown鼠标按下后触发
MouseEnter鼠标移动到控件的可见区域时触发
MouseHover鼠标在控件上方停留一段时间时触发
MouseLeave鼠标离开控件时触发
MouseMove鼠标在控件上移动时触发
MouseUp鼠标按钮按下以后，释放后触发
Move移动控件时触发，起始就是Location属性改变时触发
PaddingChangedPadding属性更改时触发
ParentChanged父控件更改时触发
PreviewKeyDown键盘按下之前触发
RegionChangedRegion属性改变时触发
ResizeSize属性改变时触发
RightToLeftChangedRightToLeft属性改变时触发
Scroll当TableLayoutPanel出现了滚动框时，用户移动拖动滚动框时触发，并且在Scrol事件中可以捕获到一些参数
SizeChangedSize属性改变时触发
StyleChanged貌似没什么用，也没有Style属性来更改
SystemColorsChanged不知道怎么触发该事件
TablndexChangedTablIndex改变时触发
TabStopChangedTabStop属性改变时触发
Validating
当使用tab键、shift+tab键等控制焦点时，焦点触发的顺序是
- Enter
- GotFocus
- Leave
- Validating
- Validated
- LostFocus
当使用鼠标控制焦点或者通过focus方法控制焦点时，焦点触发顺序如下
- Enter
- GotFocus
- LostFocus
- Leave
- Validating
- Validated
VisibleChangedVisible属性改变时触发

3 自定义TableLayoutPanel

csharp 复制代码

 class MyTableLayoutPanel:TableLayoutPanel
    {
        protected override void OnCellPaint(TableLayoutCellPaintEventArgs e)
        {
            base.OnCellPaint(e);

            Control c = this.GetControlFromPosition(e.Column, e.Row);

            if (c != null)
            {
                Graphics g = e.Graphics;

                g.DrawRectangle(
                    Pens.Red,
                    e.CellBounds.Location.X + 1,
                    e.CellBounds.Location.Y + 1,
                    e.CellBounds.Width - 2, e.CellBounds.Height - 2);

                g.FillRectangle(
                    Brushes.Blue,
                    e.CellBounds.Location.X + 1,
                    e.CellBounds.Location.Y + 1,
                    e.CellBounds.Width - 2,
                   e.CellBounds.Height - 2);
            };
        }
    }