1. Introduction
A Split Container is a combination of three components. Panel1 and Panel2 are separated either horizontally or 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 do not need to explain; all of us know how the Windows Explorer user interface works.
2. About the Sample
Have a look at the following 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 un-checked. 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 controls. 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 the selected state, access the properties, and select the dock property by clicking the down arrow from the value. From the displayed context dialog, click the down button shown as a red box in the picture below:
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 un-occupied area that is in the area where the previous placed panel does not exist. You can find this control also in the containers group of control in the toolbox as shown in the picture below.
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. One standalone panel is in the bottom of the form and another two panel comes with the split container control. This is the basic layout. For this split container set the Dock property to Fill.
5. Now you can refer to 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. The following is the code:
//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);
}
5. Splitter width
Increasing the value or decreasing the value of the splitter width up down control can adjust the splitter width. The SplitterWidth property of the split container adjusts the splitter width. In the sample, I set a maximum of 10 for the Up down control through property. So the maximum splitter width that can be set to the splitter in this sample is 10. The following screen shot shows a different splitter width:
The following 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. The following is the screen shot:
The code just sets the Orientation property to the control to a constant by taking it from the Orientation enumeration. The following 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;
else
splitContainer.Orientation = Orientation.Horizontal;
}
7. Collapsing the panel and Panel minimum size
A split container control allows collapsing a panel, either panel1 or panel2. Setting a 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 the splitter to a certain limit. The following 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;
else
splitContainer.Panel1Collapsed = false;
}
Note: The attached solution is in VS2005. If you have a later version, Say "Yes" to the Conversion dialog.