[Yugong Series] Detailed explanation of SplitContainer control on Winform control topic in September 2023

---

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 SplitContainer control

The SplitContainer control is a container control in Windows Forms. It allows users to change the size ratio of two sub-controls by dragging the separator bar, and can choose to separate them horizontally or vertically.

The SplitContainer control contains two sub-controls, one on the left and one on the right (or above and below). These two sub-controls can be obtained or set by controlling the SplitContainer.Panel1 and SplitContainer.Panel2 properties.

There are several steps to use the SplitContainer control:

1. In Visual Studio, add the SplitContainer control at design time or in code.

2. Place the SplitContainer control in the appropriate position by setting the SplitContainer's Dock property.

3. Place the controls that need to be added to the SplitContainer control in SplitContainer.Panel1 or SplitContainer.Panel2.

4. Adjust the position and size of the splitter bar of the SplitContainer control.

5. When needed, the position and size of the splitter bar of the SplitContainer control can be dynamically adjusted through code.

For example, the following code will create a SplitContainer control and add two ListBox controls to SplitContainer.Panel1 and SplitContainer.Panel2:

// 创建SplitContainer控件
SplitContainer splitContainer1 = new SplitContainer();

// 设置SplitContainer控件的Dock属性
splitContainer1.Dock = DockStyle.Fill;

// 创建两个ListBox控件
ListBox listBox1 = new ListBox();
ListBox listBox2 = new ListBox();

// 将两个ListBox控件分别添加到SplitContainer.Panel1和SplitContainer.Panel2中
splitContainer1.Panel1.Controls.Add(listBox1);
splitContainer1.Panel2.Controls.Add(listBox2);

// 添加SplitContainer控件到Form中
this.Controls.Add(splitContainer1);

In addition, you can also change the direction of the separator bar by setting the Orientation property of the SplitContainer control to achieve horizontal or vertical separation.

1. Introduction to attributes

1.1 FixedPanel

The FixedPanel property of the SplitContainer control is used to specify which panel is fixed (does not change size), while the other panel can be dynamically resized based on the position of the splitter bar. This property can be set to Panel1 or Panel2.

When the FixedPanel property is set to Panel1, Panel1 is a fixed panel, and Panel2 can dynamically adjust its size based on the position of the divider. Similarly, if the FixedPanel property is set to Panel2, Panel2 is a fixed panel and Panel1 can dynamically resize based on the position of the divider bar.

The following is an example of using the FixedPanel property:

// 创建SplitContainer控件
SplitContainer splitContainer1 = new SplitContainer();

// 设置SplitContainer控件的Dock属性
splitContainer1.Dock = DockStyle.Fill;

// 创建两个ListBox控件，并将它们添加到SplitContainer.Panel1和SplitContainer.Panel2中
ListBox listBox1 = new ListBox();
ListBox listBox2 = new ListBox();
splitContainer1.Panel1.Controls.Add(listBox1);
splitContainer1.Panel2.Controls.Add(listBox2);

// 设置SplitContainer控件的FixedPanel属性为Panel1
splitContainer1.FixedPanel = FixedPanel.Panel1;

// 设置SplitContainer控件的分隔条位置
splitContainer1.SplitterDistance = 100;

// 将SplitContainer控件添加到Form中
this.Controls.Add(splitContainer1);

In the above example, set the FixedPanel property of the SplitContainer control to Panel1 and set the splitter position to 100. This means that Panel1's size will remain the same, while Panel2's size will adjust based on the separator bar position.

It should be noted that if the FixedPanel property is set to Panel1 and the SplitterDistance property is set to a value larger than the size of Panel1, the size of Panel2 will become a negative number, causing the panel to be invisible. Therefore, you need to be careful when setting the FixedPanel and SplitterDistance properties.

1.2 IsSplitterFixed

The SplitContainer control is one of the commonly used controls in Winform. It can divide the form into two parts and display different content respectively. Among them, the IsSplitterFixed property is a property that controls whether the separator bar is movable. You can control the behavior of the separator bar by setting IsSplitterFixed to true or false.

When the IsSplitterFixed property is false, the splitter bar is movable and the user can resize the two parts by dragging the splitter bar. When the IsSplitterFixed property is true, the splitter bar is not movable and the user cannot resize the two parts by dragging the splitter bar.

When using the SplitContainer control, if you want the user to be unable to drag the separator bar to resize the two parts, you can set the IsSplitterFixed property to true. For example:

splitContainer1.IsSplitterFixed = true;

This disables the dragging functionality of the divider bar. On the other hand, if you want the user to be able to drag the splitter bar to resize the two parts, you can set the IsSplitterFixed property to false. For example:

splitContainer1.IsSplitterFixed = false;

1.3 Orientation

The SplitContainer control is a layout control in Winform. It can split the container into two panels. The user can change the size of the two panels by dragging the dividing line. Among them, the Orientation property of the SplitContainer control is used to set the direction of the split line. The specific usage is as follows:

1. By default, the Orientation property value of SplitContainer is Horizontal, which is the horizontal dividing line.

2. If you need to set a vertical dividing line, you can set the Orientation property value to Vertical.

Code example:

// 创建一个SplitContainer控件
SplitContainer splitContainer1 = new SplitContainer();
// 设置控件的大小
splitContainer1.Size = new Size(300, 200);
// 设置为垂直方向分割线
splitContainer1.Orientation = Orientation.Vertical;
// 将控件添加到窗体中
this.Controls.Add(splitContainer1);

It should be noted that when setting the Orientation property, it needs to be set after the control is created and before it is added to the parent control. This will correctly display the direction of the dividing line.

1.4 Panel1Collapsed and Panel1MinSize

SplitContainer is one of the commonly used controls in Winform. It can divide a container into two resizable areas. SplitContainer has two panels, Panel1 and Panel2. The behavior of Panel1 can be controlled through the Panel1Collapsed and Panel1MinSize properties.

The Panel1Collapsed property is used to control whether Panel1 is collapsed by default. Set the Panel1Collapsed property to true, then Panel1 will be collapsed by default, and only Panel2 will be displayed, otherwise it will not be collapsed.

The Panel1MinSize property is used to control the minimum width or height of Panel1. When the user drags the divider bar to reduce the size of Panel1, if the width or height of Panel1 is less than the value of Panel1MinSize, the size of Panel1 will no longer change, but will be fixed at the size of Panel1MinSize.

For example, the following code sets Panel1's minimum width to 100 pixels and collapses Panel1 by default:

splitContainer1.Panel1MinSize = 100;
splitContainer1.Panel1Collapsed = true;

When actually using the SplitContainer control, you can set the Panel1Collapsed and Panel1MinSize properties according to specific needs to achieve the optimal interface effect.

1.5 SplitterDistance and SplitterIncrement and SplitterWidth

1. SplitterDistance property: This property specifies the distance of the splitter bar from the left (or top) edge of the container. By default, the position of the splitter bar is in the center of the container. You can change the position of the splitter bar by modifying the SplitterDistance property. For example, if you set the SplitterDistance property to 100, the distance between the splitter bar and the left side is 100 pixels.

2. SplitterIncrement property: This property specifies the increment by which the splitter bar moves. For example, if you set the SplitterIncrement property to 10, the position of the splitter bar will move 10 pixels each time the left button is pressed or the mouse wheel is rolled up.

3. SplitterWidth property: This property specifies the width of the splitter bar. By default, the width of the divider bar is 4 pixels. The width of the splitter bar can be changed by modifying the SplitterWidth property.

When using the SplitContainer control, you can set these properties according to your needs to achieve better interface effects. For example, if you want the user to flexibly adjust the relative size of two child controls, you can set the SplitterIncrement property to 1 so that the user can finely adjust the size each time the splitter bar is moved. If you want the splitter bar to be narrower, you can set the SplitterWidth property to 2.

2. Common scenarios

The SplitContainer control is a container control in Windows Forms. It is often used to divide a form into two resizable areas. Typical scenarios include:

1. Layout adjustment: The SplitContainer control can be used to adjust the form layout. For example, the form is divided into left and right areas. The left is the tree control and the right is the detailed information display area. The user can freely adjust the size of the left and right areas to suit different needs. resolution and screen size.

2. Multi-window display: The SplitContainer control can also be used for multi-window display, such as displaying multiple data tables or multiple Web browser controls in one area. Users can adjust the size of the SplitContainer control to ensure that all data tables or browser controls can be displayed.

3. Split window: The SplitContainer control can be used as a split window, dividing the form into two areas for different operations. For example, the left is the directory structure and the right is the file display area. The user can select the directory on the left and the corresponding file will be displayed on the right. .

The SplitContainer control can be used in any situation where functional areas of the interface need to be distinguished. It can greatly improve the user experience, allowing users to freely adjust the interface size and improve work efficiency.

3. Specific cases

The following is a complete SplitContainer control case, including how to create and use the SplitContainer control, how to modify the properties of the SplitContainer control through code, and how to handle the events of the SplitContainer control.

1. First create a new WinForm project and add a SplitContainer control to the Form form.

2. Add two Panel panels in the SplitContainer control, named panel1 and panel2 respectively.

3. Set the properties of the SplitContainer control:

   (1) SplitContainer控件的Dock属性设置为Fill，表示SplitContainer控件会填满Form窗体。
   
   (2) SplitContainer控件的Orientation属性设置为Horizontal，表示SplitContainer控件中的两个Panel面板水平排列。
   
   (3) SplitContainer控件的Panel1Collapsed属性设置为false，表示panel1面板不会被自动隐藏。
   
   (4) SplitContainer控件的SplitterWidth属性设置为5，表示分隔条的宽度为5个像素。
   
   (5) SplitContainer控件的SplitterDistance属性设置为200，表示分隔条的初始位置为200个像素。
   

4. Add a Label label control in the panel1 panel and set the Text property to "Left Panel".

5. Add a Label label control in the panel2 panel and set the Text property to "right panel".

6. In the Form form's Load event, add code to initialize the properties of the SplitContainer control:

   private void Form1_Load(object sender, EventArgs e)
   {
         
         
       splitContainer1.Dock = DockStyle.Fill;
       splitContainer1.Orientation = Orientation.Horizontal;
       splitContainer1.Panel1Collapsed = false;
       splitContainer1.SplitterWidth = 5;
       splitContainer1.SplitterDistance = 200;
   }
   

7. In the SplitterMoved event of the SplitContainer control, add code to show where the splitter bar has moved:

   private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e)
   {
         
         
       label1.Text = "分隔条位置：" + splitContainer1.SplitterDistance.ToString();
   }
   

The complete code is as follows:

using System;
using System.Windows.Forms;

namespace SplitContainerDemo
{
    
    
    public partial class Form1 : Form
    {
    
    
        public Form1()
        {
    
    
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
    
    
            splitContainer1.Dock = DockStyle.Fill;
            splitContainer1.Orientation = Orientation.Horizontal;
            splitContainer1.Panel1Collapsed = false;
            splitContainer1.SplitterWidth = 5;
            splitContainer1.SplitterDistance = 200;
        }

        private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e)
        {
    
    
            label1.Text = "分隔条位置：" + splitContainer1.SplitterDistance.ToString();
        }
    }
}

Using this complete case, you can quickly create and use the SplitContainer control, and learn how to use some properties and events of the SplitContainer control in WinForm projects.