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

• WinForm 是 Windows Form 的简称，是基于 .NET Framework 平台的客户端（PC软件）开发技术，是 C# 语言中的一个重要应用。

• .NET 提供了大量 Windows 风格的控件和事件，可以直接拿来使用。

• 本专栏内容是按照标题序号逐渐深入的，如有不懂的基础问题，可看前面教程。

• 在介绍属性的时候，会展示一些用法、代码、实例、截图，这样看起来更清晰，免得直接看最后综合实例会有些懵

1 表格布局器TableLayoutPanel——属性

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

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

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

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

1.1 Name、AllowDrop、AllowDrop

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

1.2 AutoScroll

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

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

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

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

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

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

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

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

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

1.3 AutoScrollMargin、AutoScrollMinSize

• AutoScrollMargin
  该属性经过测试无效

• AutoScrollMinSize

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

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

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属性，并且对于添加子控件除了在设计器中添加外，同样也可以使用代码添加，例子如下:

	tableLayoutPanel1.BackColor = Color.Blue;//设置tableLayoutPanel1的背景颜色为蓝色Button[] buttons = new Button[] { new Button(), new Button(), new Button() };//声明一个buttons的集合，集合中有三个buttonbuttons.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

 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);};}}