C#

C# SplitContainer Explained with Example

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.

2. About C# SplitContainer Example

Have a look at the below screenshot:

C# SplitContainer Example

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

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

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

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

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.

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:

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

Splitter with 8 pixel width

Below is the code for it:

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

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:

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:

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

 

Advertisements

This site uses Akismet to reduce spam. Learn how your comment data is processed.