Article directory
Preface
Winform controls are user interface elements in Windows Forms. They can be used to create various visual and interactive components of Windows applications, such as buttons, labels, text boxes, drop-down list boxes, check boxes, radio boxes, progress bars, etc. . Developers can use Winform controls to build user interfaces and respond to user actions to create powerful desktop applications.
1. Detailed explanation of TableLayoutPanel control
TableLayoutPanel control is a container control in Winform, used to create grid layout in the interface. It distributes controls into a grid, each of which can be the same or different sizes. The TableLayoutPanel control can automatically adjust the layout. When the form size changes, the controls in it will automatically adjust to the best position.
The main properties of the TableLayoutPanel control include:
- ColumnCount and RowCount: specify the number of columns and rows of the table;
- ColumnStyles and RowStyles: specify the size and style of each column and row;
- CellBorderStyle: Specify the border style of the cell;
- Controls: A collection containing controls that can be used to add or remove controls.
To use the TableLayoutPanel control, drag and drop it onto the form in the Visual Studio designer and set its properties. When adding a control, you can add it to a specified cell by specifying its Column and Row properties in the Properties window.
The following is a simple sample code that demonstrates how to use the TableLayoutPanel control:
private void Form1_Load(object sender, EventArgs e)
{
TableLayoutPanel tableLayoutPanel1 = new TableLayoutPanel();
tableLayoutPanel1.ColumnCount = 2;
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 50F));
tableLayoutPanel1.RowCount = 3;
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33F));
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33F));
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33F));
Button button1 = new Button();
button1.Text = "Button 1";
tableLayoutPanel1.Controls.Add(button1, 0, 0);
Button button2 = new Button();
button2.Text = "Button 2";
tableLayoutPanel1.Controls.Add(button2, 1, 0);
Button button3 = new Button();
button3.Text = "Button 3";
tableLayoutPanel1.Controls.Add(button3, 1, 1);
Button button4 = new Button();
button4.Text = "Button 4";
tableLayoutPanel1.Controls.Add(button4, 0, 2);
this.Controls.Add(tableLayoutPanel1);
}
We created a 2x3 table layout where each cell is one-third the size of the form. We added four button controls and assigned them to different cells. After adding the table layout control to the Controls collection of the form, run the application to see the buttons appear in the form in a grid layout.
1. Introduction to properties
1.1 AutoScroll、AutoScrollMargin、AutoScrollMinSize、AutoSize、AutoSizeMode
There are the following 5 scrolling-related properties in the TableLayoutPanel control:
-
AutoScroll: Controls whether automatic scrolling is enabled. When set to True, scrollbars are automatically enabled if the content in the control exceeds the bounds of the control. By default, this property is False.
-
AutoScrollMargin: Specifies the margin of the scrolling edge. When autoscroll is enabled, this property defines an inner rectangle in which scroll bars do not appear. The default value is 0,0.
-
AutoScrollMinSize: Specifies the minimum scrolling size of the control. If the size of the control is smaller than this value, scroll bars are automatically enabled. The default value is 0,0.
-
AutoSize: Controls the automatic resizing behavior of controls. When set to True, the control's size automatically adjusts to its content. By default, this property is False.
-
AutoSizeMode: Specifies the dimensions according to which the control is adjusted when AutoSize is True. Can be set to GrowOnly (grow only), GrowAndShrink (grow and shrink), or None (no adjustment). The default value is GrowOnly.
Below is a simple example code that demonstrates how to use these properties. We added some Label controls to a TableLayoutPanel, adding enough of them that they exceeded the bounds of the controls. After setting the AutoScroll and AutoScrollMargin properties, the control will automatically enable the scroll bar. At the same time, after setting the AutoScrollMinSize property, the minimum scrolling size of the control is equal to the sum of the sizes of all controls in the control. After finally setting the AutoSize and AutoSizeMode properties, ensure that the size of the control can be automatically adjusted according to the content.
private void Form1_Load(object sender, EventArgs e)
{
TableLayoutPanel tableLayoutPanel1 = new TableLayoutPanel();
tableLayoutPanel1.ColumnCount = 2;
tableLayoutPanel1.RowCount = 10;
tableLayoutPanel1.AutoScroll = true;
tableLayoutPanel1.AutoScrollMargin = new Size(20, 20);
tableLayoutPanel1.AutoScrollMinSize = new Size(0, tableLayoutPanel1.Height * 2);
for (int i = 1; i <= 20; i++)
{
Label label = new Label();
label.Text = "Label " + i.ToString();
tableLayoutPanel1.Controls.Add(label);
}
tableLayoutPanel1.AutoSize = true;
tableLayoutPanel1.AutoSizeMode = AutoSizeMode.GrowAndShrink;
this.Controls.Add(tableLayoutPanel1);
}
We created a 2x10 table layout and added 20 Label controls. We set the AutoScroll and AutoScrollMargin properties so that the control can automatically enable the scroll bar and ensure that the scroll bar does not exceed the boundary. We set the AutoScrollMinSize property so that the minimum scrolling size of the control is equal to the sum of the sizes of all controls in the control. Finally, we set the AutoSize and AutoSizeMode properties to ensure that the size of the control can be automatically adjusted according to the content. When running the application, you can see that the size of the control is automatically adjusted, and you can use the scroll bar to scroll to see the Label control that exceeds the boundary.
1.2 ColumnCount
The TableLayoutPanel control is a layout control in Windows Forms, which can be used to organize and arrange sub-controls. Among them, the ColumnCount property is used to specify the number of columns in the control.
Instructions:
-
Create a new Windows Forms application project in Visual Studio.
-
In Design view, add a TableLayoutPanel control to the form.
-
Enter the properties window of the control and enter the desired number of columns in the ColumnCount property, for example 3 columns.
-
Add child controls to TableLayoutPanel, and the child controls will be arranged according to the specified number of columns. You can specify the number of columns in which it is located through the control's Column property.
Code example:
//新建一个Windows Forms应用程序项目，向窗体中添加一个TableLayoutPanel控件
//设置ColumnCount属性为3
private void Form1_Load(object sender, EventArgs e)
{
this.tableLayoutPanel1.ColumnCount = 3;
}
//向TableLayoutPanel中添加三个Button控件，分别放在第一列、第二列和第三列
private void AddControlsToTableLayoutPanel()
{
//第一个按钮，位置为第一列、第一行
Button button1 = new Button();
button1.Text = "Button 1";
this.tableLayoutPanel1.Controls.Add(button1, 0, 0);
//第二个按钮，位置为第二列、第二行
Button button2 = new Button();
button2.Text = "Button 2";
this.tableLayoutPanel1.Controls.Add(button2, 1, 1);
//第三个按钮，位置为第三列、第三行
Button button3 = new Button();
button3.Text = "Button 3";
this.tableLayoutPanel1.Controls.Add(button3, 2, 2);
}
The above code will add three Button controls to the TableLayoutPanel, placing them in the first, second and third columns respectively.
1.3 RowStyles
In Winform, the TableLayoutPanel control is a panel container used for layout controls. You can use the RowStyles property to control the size and style of each row in the TableLayoutPanel. Here are the steps to use the RowStyles property:
-
Open the Winform form designer, find the TableLayoutPanel control in the toolbox and drag it to the form.
-
Select the TableLayoutPanel control, find the RowStyles property in the properties window, and click its "..." button.
-
In the pop-up RowStyles editor window, you can see that there are already some default row styles in the current TableLayoutPanel. New row styles can be added using the "Add" button.
-
For each row style, the following properties can be set:
- SizeType: The type of row size, you can choose from Absolute, AutoSize, and Percent.
- Height: The value of the line height, which can be set to a specific pixel value or percentage.
- Padding: The value of the inner margin, which can be set to a specific pixel value.
-
When all row styles have been set, click the "OK" button to close the editor window.
-
Now you can add controls to the TableLayoutPanel, and adjust the row and column positions of the controls as needed, and the TableLayoutPanel will automatically layout according to the row style.
Case:
private void Form1_Load(object sender, EventArgs e)
{
TableLayoutPanel tableLayoutPanel1 = new TableLayoutPanel();
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”
this.Controls.Add(tableLayoutPanel1);
}
2. Common scenarios
The TableLayoutPanel control is usually used in Winform form design for layout controls, components, etc. Common scenarios are as follows:
-
Interface design: When designing the interface in Winform, use TableLayoutPanel to conveniently layout the controls, making the interface beautiful, clean and easy to maintain.
-
Data presentation: When a large amount of data needs to be presented in a table, you can use TableLayoutPanel to conveniently arrange the data in a table shape, which is convenient for users to view and operate.
-
Functional grouping: According to different functions, use TableLayoutPanel to group corresponding controls and arrange them on different panels, so that users can quickly find the required functions.
-
Module splitting: In a large-scale Winform application, use TableLayoutPanel to split the controls of each module, which helps reduce the coupling and complexity of the system, and facilitates later expansion and maintenance.
It should be noted that when using the TableLayoutPanel control, its properties should be set reasonably, including the number of rows, number of columns, row height, column width, filling method, etc., to achieve the best results.
3. Specific cases
The following is a complete example of a simple TableLayoutPanel control in Winform, showing how to use TableLayoutPanel for control layout.
First, create a new Winform application project in VS, and then add a TableLayoutPanel control in the Form1 form.
TableLayoutPanel tableLayoutPanel1 = new TableLayoutPanel();
tableLayoutPanel1.Dock = DockStyle.Fill;
tableLayoutPanel1.ColumnCount = 4;
tableLayoutPanel1.RowCount = 3;
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 25F));
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 25F));
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 25F));
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 25F));
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.33F));
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.33F));
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 33.33F));
this.Controls.Add(tableLayoutPanel1);
In this code, we first create a new TableLayoutPanel control and set its Dockproperties Fillto make it occupy the entire form. Then we set the number of rows and columns of the control, as well as the percentage size of each row and column. In this example, we divide the TableLayoutPanel control into a grid of 3 rows and 4 columns.
Next, we add some controls to the TableLayoutPanel control:
Label label1 = new Label {
Text = "Label 1", Dock = DockStyle.Fill, TextAlign = ContentAlignment.MiddleCenter, BackColor = Color.Red };
tableLayoutPanel1.Controls.Add(label1, 0, 0);
Label label2 = new Label {
Text = "Label 2", Dock = DockStyle.Fill, TextAlign = ContentAlignment.MiddleCenter, BackColor = Color.Blue };
tableLayoutPanel1.Controls.Add(label2, 1, 0);
Label label3 = new Label {
Text = "Label 3", Dock = DockStyle.Fill, TextAlign = ContentAlignment.MiddleCenter, BackColor = Color.Green };
tableLayoutPanel1.Controls.Add(label3, 2, 0);
Label label4 = new Label {
Text = "Label 4", Dock = DockStyle.Fill, TextAlign = ContentAlignment.MiddleCenter, BackColor = Color.Yellow };
tableLayoutPanel1.Controls.Add(label4, 3, 0);
Button button1 = new Button {
Text = "Button 1", Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(button1, 0, 1);
Button button2 = new Button {
Text = "Button 2", Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(button2, 1, 1);
Button button3 = new Button {
Text = "Button 3", Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(button3, 2, 1);
Button button4 = new Button {
Text = "Button 4", Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(button4, 3, 1);
TextBox textBox1 = new TextBox {
Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(textBox1, 0, 2);
In this code, we create some Label, Button and TextBox controls and Controls.Addadd them to the TableLayoutPanel using methods. We use Dockthe property to set the docking mode of the control, and the TextAlignand BackColorproperties to set the text alignment and background color of the control.
Finally, when we start the application, we can see a beautiful interface:
This example is just a simple application of the TableLayoutPanel control, in fact you can use it to create more complex layouts. It should be noted that the number of rows, columns and percentage size of the control should be set reasonably to achieve the best effect.