Home.NET The Why and How of the SplitContainer Cont...
The Why and How of the SplitContainer Control
The SplitContainer control in the .NET framework is a serious improvement over the Splitter control in an earlier version of the framework. To find out how Microsoft took a good thing and made it better, and how you can use it to build user interfaces in your applications. keep reading.
When Microsoft added the Splitter in the .NET Framework 1.1 it was found to be very useful in designing a physical division in a form that can be resized easily. One immediate use was for creating an Explorer-like user interface with a treeview on one side and a listview on the other. What's even more impressive is that multi-panels which look like Microsoft Outlook's UIs could be easily designed. However, in the .NET 2 framework, Microsoft vastly improved this to bring in the SplitContainer control. In fact, the object browser picture you are seeing in this tutorial is a UI that makes use of this multiple panel structure.
SplitContainer Properties
The SplitContainer Class is a new class in .NET Framework 2.0. It belongs to the Layout category. It essentially divides the display area into two or more resizable parts. It belongs to the System.Windows. Forms name space; most classes in this name space are derived from the Control Class.
There are a large number of properties that are associated with the SplitContainer Control. A number of them can be configured as "Set" and "Get." There is no place better than the Object Browser to look at all the details.
SplitContainer Control
The SplitContainer Control was added in Visual Studio 2005 to the Toolbox. You will find this control in the VS 2005 Toolbox under the All Windows Forms menu as shown. There are two controls, the Splitter and the SplitContainer. The Splitter is still present for backward compatibility. In VS 2005, the use of SplitContainer is recommended.
Depending on the orientation property there are two types, the vertical which is the default, and the horizontal. Create a new Windows Application from File-->New Project after choosing Visual Basic as the project type. You can pick the Windows Application from Visual Studio's installed templates. This adds a WindowsApplication1.vb which may be changed to something of your choice. In this article it is called Vertical.vb which adds the form Vertical to the project with a default size of 300 x 300.
Now double click the SplitContainer control in the Toolbox. This adds the SplitContainer which appears as a divider of the vertical form by two panels, Panel1 and Panel2. Each of these Panels is accessed by prefixing the SplitContainer1. For example Panel1 will be SplitContainer1.Panel1. Each panel has default properties related to layout, appearance, behavior, data, and so forth.
It is possible to view the form which you may see displayed after building the project and running it as shown. You will see a thin line dividing the form. When you place your mouse on the line you will see that you can drag it to either side by moving the mouse. Sometimes you will not see this splitter in the displayed form unless you search for it with your mouse.
Accessing the properties of the SplitContainer Control
To see how the properties relate, place the following code snippet into the form's load event. The With...End With block sets the various properties such as the minimum and maximum sizes of the panels; the back color of the panel; the size of the SplitContainer; and so on. Comments have been added to the appropriate lines which should make the meaning clear.
You can also add other controls to the panels, since the main function of the panels is to support the controls placed on them, including another SplitContainer to further divide the design area, as we shall see later. In this code, a text box is added to Panel2 and a Button is added to Panel1 at run time. The messages will echo the size of the panels and the total size of the SplitContainer.
Public Class Vertical
Private Sub Vertical_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
Dim txtbox As New TextBox
txtbox.Text = "The is Panel2"
Dim btn As New Button
btn.Text = "Panel1 button"
btn.ForeColor = Color.Crimson
With SplitContainer1.Dock = System.Windows.Forms.DockStyle.Fill .ForeColor = System.Drawing.Color.Bisque .Location =
New System.Drawing.Point(0, 0) ' you cannot resize Panel1 to less than
25 pixels .Panel1MinSize = 25 ' you cannot approach right edge less by
less than 30 .Panel2MinSize = 30 .Size =
New System.Drawing.Size(292, 273) .SplitterDistance = 79
' This splitter moves in 10-pixel increments. .SplitterIncrement =
10 .SplitterWidth = 5 ' first element that gets tabbed is the
SplitContainer1 .TabIndex = 0 ' make Panel1's backcolor as aquamarine .Panel1.BackColor = System.Drawing.Color.Aquamarine
End With
Debug.Print("Panel1 width: " & _
SplitContainer1.Panel1.Width & vbCrLf)
Debug.Print("Panel2 width: " & _
SplitContainer1.Panel2.Width & vbCrLf)
Debug.Print("Total width: " & _
SplitContainer1.Panel1.Width + _
SplitContainer1.Panel2.Width + _
SplitContainer1.SplitterWidth & vbCrLf)
SplitContainer1.Panel2.Controls.Add(txtbox)
SplitContainer1.Panel1.Controls.Add(btn)
End Sub
End Class
When you run this code you will see the following displayed.
The following result will be printed to the output screen.
Panel1 width: 79
Panel2 width: 208
Total width: 292
One of the common properties of controls is the Dock property. This property shows to which of the four sides the control is docked, or whether it "fills" the parent as shown by the design time "dock" setting, or whether the control is not docked at all. You make these choices by clicking on the appropriate button in the Properties window. The Anchor property on the other hand defines to which edges of a container the control contained therein is bound.
Since the SplitContainer control is basically related to layout as explained earlier, the dock and anchor properties of the controls it contains in its panels are important. For example when the splitter resizes the panels, depending on whether or not the controls are properly set with regard to "dock" and "anchor," it is possible to make them adjust automatically while resizing the panels, or obscure them.
Anchored Text boxes in Panels
While looking at properties it is enough to right click inside the control to review the properties or make changes to the properties. For the SplitContainer right click on any of the panels and from the drop-down choose Select SplitContainer1 to review its properties. In the same drop-down you may also choose the form which is underneath the SplitContainer.
The setting of the text boxes in the design view of the following form with a SplitContainer shown are as follows:
Textbox1 in SplitContainer1.Panel1 Anchor: Top, Left (default) Dock None Size: 100, 74 WordWrap: True MultiLine: True ScrollBars: Vertical
Textbox2 in SpliterContainer1.Panel2 Anchor: Top, Right Dock None Size: 100,82 WordWrap: True MultiLine: True ScrollBars :Vertical
When this project is built and the Docking form is run the form will be displayed as shown with the Splitter dragged to the left.
When the splitter is dragged to the right, the resizing makes the following change to the display. The obscuring of the text in the text boxes is easy to see.
The text box settings in the form Dock2, which also has a SplitContainer control shown with two text boxes, are as follows:
Textbox1 in SplitContainer1.Panel1 Anchor: Top, Left, Right Dock None Size: 100, 105 WordWrap: True MultiLine: True ScrollBars: Vertical
Textbox2 in SpliterContainer1.Panel2 Anchor: Top, Bottom, Left, Right Dock None Size: 171,81 WordWrap: True MultiLine: True ScrollBars: Vertical
Th design view of the Dock2 form is shown in the next picture.
When the project is built and the form displayed, the Dock2 form appears as shown after dragging the control to the left.
When the Splitter is dragged to the right, the Dock2 form appears as shown. In both the cases, the resizing did not obscure the control as it did in the previous case (use the scroll bar in Textbox2 to see the entire text).
Just as you can embed a frameset within a frameset in HTML, so you can nest SplitContainer like matryoshka dolls, one inside the other, at the cost of real estate for each getting smaller and smaller. Add a SplitContainer to a form as shown. The default dock property is "fill," that is, the SplitContainer is attached to the four sides of the form. If you change this property to "none" you can make it smaller as shown in the picture.
Click on Panel2 and double click the SplitContainer control in the tool box. This adds another vertical (default orientation) SplitContainer. Right click on Panel2 and choose to look at the properties of SplitContainer2 as shown.
For SplitContainer2 change the orientation from vertical to horizontal. Add four buttons as marked. For the Form load event as well as the click event of the buttons, insert code as shown in the listing. Buttons are marked Button1 to Button 4 from top to bottom.
Public Class nested
Private Sub nested_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
SplitContainer2.IsSplitterFixed = True
SplitContainer1.Panel1.BackColor = Color.GhostWhite
SplitContainer2.Panel1.BackColor = Color.BlanchedAlmond
SplitContainer2.Panel2.BackColor = Color.Ivory
End Sub
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click 'Hide a panel
SplitContainer1.Panel1.Hide()
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button2.Click 'show a panel
SplitContainer1.Panel1.Show()
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button3.Click
'collapse a panel SplitContainer1.Panel1Collapsed = True
End Sub
Private Sub Button4_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button4.Click
'do not collapse a panel, expand it SplitContainer1.Panel1Collapsed =
False
End Sub
End Class
The default panel color as well as the splitter is hard to see and sometimes disappears; hence "backcolor" was added to the panels to distinguish them from one another and to locate the splitters. While "Hide" and "Show" hide and show the panels, the Boolean values for the Panel collapsed property collapse and expand the panels as shown in the next picture when the Collapse Panel1 button is clicked.
The object browser shows two events related to the SplitContainer Control. They are SplitterMoving and SplitterMoved.
The following code snippet shows how you may visualize the two events. For those who are familiar with Visual Basic 6, the vertical and horizontal scroll bars had this feature. The SplitterMoving event captures the dynamic changes while the SplitterMoved event looks at the splitter after it has moved and come to a rest.
Double click the SplitContainer control onto a new form. Add two text boxes to the form as shown. In the code box you can use the drop-down to get the event codes as shown.
Public Class Form1
Private Sub SplitContainer1_SplitterMoved(ByVal sender As Object, _
ByVal e As System.Windows.Forms.SplitterEventArgs) Handles _
SplitContainer1.SplitterMoved
Dim strg As String = ""
strg = strg + "SplitContainer Splitterwidth is: " & _
SplitContainer1.SplitterWidth.ToString & vbCrLf
strg = strg + "SplitterContainer SplitterDistance is: " & _
SplitContainer1.SplitterDistance.ToString & vbCrLf
strg = strg + "SplitterContainer Panel1 width is: " & _
SplitContainer1.Panel1.Width & vbCrLf
strg = strg + "SplitContainer width: " & _
SplitContainer1.Width.ToString
TextBox1.Text = strg
End Sub
Private Sub SplitContainer1_SplitterMoving(ByVal sender As Object, _
ByVal e As System.Windows.Forms.SplitterCancelEventArgs) Handles _
SplitContainer1.SplitterMoving
Dim strg As String = ""
strg = strg + "SplitterContainer Panel1 width is: " & _
SplitContainer1.Panel1.Width & vbCrLf
TextBox2.Text = strg
End Sub
End Class
When you run the program you can see that data is captured while the SplitContainer is still moving. It is important that the hardware works well so that you can see the effects while moving. To grab the splitter more effectively, the splitter increment was set at 1 and the splitter width was set at 10. The picture shows the form at an intermediate dragged position.
Summary
The SplitContainer control is a very useful control to rapidly design user interfaces similar to those used in "Explorer" type programs. The VS 2005 IDE has numerous windows with this control, both simple and nested types. Many of the properties can be set in the design and most of the rest can be programmatically controlled. By combining the other ASP.NET 2.0 specific controls it is possible to deliver a rich user experience with a minimum of code.
/ 23 
Visual Basic for Beginners
