1. Introduction
The C# SplitContainer is a mix of three components. Those are two panels and one splitter. The Splitter separates Panel1 and Panel2 either vertically and horizontally by a Splitter. A split container can create your favorite windows explorer-like user interface. To set the properties for the panels you should click the panel part of the container. To select the full container, one should click on the splitter. You can set a unique set of properties for the panels on both sides of the splitter. The splitter helps to resize the panels. For example, in a Windows Explorer one can resize the directory tree view by moving the Splitter.
The below youtube video shows Introduction about C# SplitContainer:
2. About C# SplitContainer Example
Have a look at the below screenshot:
About the C# SplitContainer Example
The top area of the above picture shows the Splitter container. The panel on the left side hosts set of controls. List box fills the panel on the right side of the Splitter. We can adjust the width of the Splitter by adjusting the value in the Splitter Width ‘Updown Control’. Similarly, we can set a minimum size for the panel 1 by adjusting the value in the second Updown Control. The minimum size restricts resizing of the Panel1 by moving the splitter after a certain limit. The Close Action Panel checkbox collapses the Panel1 when it is checked and brings it back when it is unchecked. The radio buttons helps to split the panels either vertical and horizontal.
3. Designing the Form Layout
3.1 Setup Bottom Panel
1) First, drag and drop the Panel control on the form from the Container group of control. The panel appears as shown below:
Panel on Windows Form
2) Using the arrow shown above move it to the bottom of the form.
3) When the control is still in the selected state, access the properties, and select the dock property by clicking the down arrow on the value. From the displayed context dialog, click the down button shown as a red box in the below picture:
Docking the Panel on Windows Form
Once we set the ‘Dock Property’ to bottom, the C# attaches the Panel to the bottom edge of the Windows Form. Now, if we resize the form, the panel moves sticking to the bottom edge.
3.2 Setup SplitContainer
1) Now drag and drop the “SplitContainer Control” to the form in the unoccupied area. It means the area where the previously placed panel not exists. We can find this control also in the containers group of control in the toolbox as shown in the below picture.
SplitContainer in Toolbox
Once we are done, the C# Windows Form looks like what is shown below. Note, we can set the background color for the panel in the bottom to differentiate it from the Split container.
Splitter of the SplitContainer splitting two panels
In the above form, there are three panels. A standalone panel is in the form’s bottom and other two panels on the top of the form came from the SplitContainer Control. This is the basic layout. For this SplitContainer, we set the ‘Dock Property’ to ‘Fill’.
2) Now you can refer the attached sample to place all other controls on the specific panels. To place a control on a specific panel (One of three) drag the control from the toolbox and drop it to the panel in which you want to place the control.
The below you tube video explains about this example and also helps you in designing the Form:
4. Adding and Removing Items
This is straightforward, the click event handler for the add item button will add the user entered data in the text box to list box in panel2. The remove item button will remove the selected item from the list box at panel2 part of the SplitContainer. Below is the C# button handlers:
|
1 2 3 4 5 6 7 8 9 10 11 |
//Split 01: Add the items to the list box private void btnAdd_Click(object sender, EventArgs e) { List.Items.Add(txtName.Text); } //Split 02: Remove item from list box private void btnRemove_Click(object sender, EventArgs e) { List.Items.RemoveAt(List.SelectedIndex); } |
You can watch you tube demo here:
5. Splitter Width of SplitContainer
Increasing the value or decreasing the value of the Splitter Width Updown Control can adjust the Splitter width.
SplitterWidth Property
of the split container adjusts the width of the splitter. In the example, we set the maximum of 10 for the Up-down control through a property. So the maximum splitter width that can be set to the splitter in our example is 10. The below screen shot shows a splitter width of 8:
Splitter with 8 pixel width
Below is the code for it:
|
1 2 3 4 5 |
//Split 03: Change the Splitter width private void udSplitWidth_ValueChanged(object sender, EventArgs e) { splitContainer.SplitterWidth = (int) udSplitWidth.Value; } |
Below youtube video shows Panel1 Minimum Size and Splitter width:
6. Split Vertical Or Horizontal
When we click the horizontal radio button, the example splits the panels horizontally. We should tick the ‘Split Vertical’ Radio Button to split it vertical again. Below is the screenshot:
Panels Split Horizontally and Splitter goes Horizontal
The
Orientation Enumeration
defines two constants called Vertical and Horizontal. Based on the Radio Box selection, we set this constant value to the
Orientation Property
of the SplitContainer Control. Below is the CheckedChanged Event handler function:
|
1 2 3 4 5 6 7 8 |
//Split 04: Split Vertically or Horizontally private void rdSplitVerticle_CheckedChanged(object sender, EventArgs e) { if (rdSplitVerticle.Checked == true ) splitContainer.Orientation = Orientation.Vertical; else splitContainer.Orientation = Orientation.Horizontal; } |
Below youtube video shows changing splitter orientation:
7. Panel Collapsing And Minimum Size
SplitContainer Control allows collapsing the panels. But it does that for either panel1 or panel2. Setting minimum size does not allow the user to shrink the panel beyond that size using the splitter. Again only one panel of the SplitContainer can have a minimum size.
The Property
Panel1MinSize
controls maximum size one can shrink a panel. The property takes a number which tells the size in pixels.
Panel1Collapsed
Property takes a Boolean value. When the value is true, it hides the panel1 of the SplitContainer. Note, these properties are available for panel2 as well. They are
Panel2MinSize
and
Panel2Collapsed
. The code is below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//Split 05: Set Minimum size for Panel 1 private void udp1Minsize_ValueChanged(object sender, EventArgs e) { splitContainer.Panel1MinSize = (int)udp1Minsize.Value; } //Split 06: Set Minimum size for the panel private void frmSplitter_Load(object sender, EventArgs e) { splitContainer.Panel1MinSize = 100; } //Split 07: Collapse Panel 1 private void checkBox1_CheckedChanged(object sender, EventArgs e) { if (checkBox1.Checked == true) splitContainer.Panel1Collapsed = true; else splitContainer.Panel1Collapsed = false; } |
The below youtube video shows collapsing panel1 part of the split container at runtime:
8. Summary
In this article, we dealt with three Panels. One Panel we placed in the bottom of the form and other two panels are handled by the SplitContainer. We also explored different properties of the SplitContainer.
Google Drive Link to Download the Example
Categories: C#
Tags: Container Controls, Panel1Collapsed, Panel1MinSize, SplitContainer, Splitter
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.