May 7, 2011

C# - Container Controls 3 - SplitContainer

1. Introduction

A "Split Container" is a combination three components.  Panel1 and Panel2 separated either horizontally and vertically by a splitter.  A split container is useful to create your favorite windows explorer-like user interface. To set the properties for the panels you should click the panel portion of the container. To select the entire container, click on the splitter. You can set a different set of properties for the panels on both sides of the splitter.

The splitter helps to resize the panels and...  Oh!!! All right I no need to explain, all of us know how windows explorer user interface works.

2. About the Sample

Have a look at the below screenshot:

The top area shows the Splitter container. The panel on the left side (Panel 1) is placed with a set of controls. The Panel on the right side is filled with a listbox control. You can adjust the width of the splitter by adjusting the value in the "Updown Control". Similarly, you can set the 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 help to split the panels vertically or horizontally.

3. Designing the Form layout shown above

1) First, drag and drop the Panel control on the form from the Container group of control. The panel appears as shown below:

2) Using the arrow shown above move it to the bottom of the form.

3) When the control is still in 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:

This step makes the panel docked to the bottom of the form and when you resize the form the bottom panel goes with the bottom edge.

4) Now drag and drop the "SplitContainer Control" to the form in the unoccupied area that is in the area where the previously placed panel not exists. You can find this control also in the containers group of control in the toolbox as shown in the below picture.

Once you are done the form looks like what is shown below (Note I just set the background color for the panel in the bottom, to differentiate it from the Split container):

In the above form, there are three panels. First a standalone panel is in the bottom of the form and other two panels on the top of the form came from the Split Container Control. This is the basic layout. For this split, the container sets the "Dock Property" to Fill.

5) Now you can refer the attached sample to place all other controls on the specific panels. To place a control on the 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 straight forward, the click event handler for the add item button will add the text entered in the text box to list box in panel 2. The remove item button will remove the selected item in the list box at panel 2 of the container. Below is the code:

//Split 01: Add the items to the list box
private void btnAdd_Click(object sender, EventArgs e)

//Split 02: Remove item from list box
private void btnRemove_Click(object sender, EventArgs e)

5. SplitterWidth of SplitContainer

Increasing the value or decreasing the value of the splitter width up-down control can adjust the splitter width. "SplitterWidth Property" of the split container adjusts the splitter width. In the sample, I 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 this sample is 10. The below screen shot shows a splitter width of 8:

Below is the code for it:

//Split 03: Change the Splitter width
private void udSplitWidth_ValueChanged(object sender, EventArgs e)
    splitContainer.SplitterWidth = (int) udSplitWidth.Value;

6. Split vertical or horizontal

When we click the horizontal radio button the split container’s panel are split horizontally. To split it vertical again the split vertical radio button should be checked. Below is the screen shot:

The code just sets the "Orientation Property" to the control to a constant by taking it from the Orientation enumeration. Below is the code for it:

//Split 04: Split Vertically or Horizontally
private void rdSplitVerticle_CheckedChanged(object sender, EventArgs e)
    if (rdSplitVerticle.Checked == true )
        splitContainer.Orientation = Orientation.Vertical;
        splitContainer.Orientation = Orientation.Horizontal;

7. Collapsing the panel and Panel minimum size

Split container control allows collapsing the panel. But it should either panel1 or panel2. Setting minimum size (Again only one panel of the split container can have the minimum size) does allow the user to shrink the panel beyond that size. The properties "Panel1MinSize" and "Panel1Collapsed" are accessed at runtime to do the collapsing of panel 1 and restricting the size reduction of panel1 by moving splitter to a certain limit. Below is the code for it:

//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;
        splitContainer.Panel1Collapsed = false;

Note: The attached solution is in VS2005. If you have the latest version, Say “Yes” to the Conversion dialog.

Source Code : Download

1 comment:

  1. This is one of the best articles so far I have read online. Just useful information. Very well presented. I have found another nice post with wonderful explanation on
    SplitContainer Control in C#.Net

    Thanks Everyone!!


Leave your comment(s) here.

Like this site? Tell it to your Friend :)