Section 3.9. Create a Windows Explorer-like Split Window | Visual Basic 2005: A Developers Notebook

3.9. Create a Windows Explorer-like Split Window

.NET 1.0 gave developers the tools they needed to create split windows of the kind seen in Windows Explorer with the Splitter control. Unfortunately, creating these windows wasn't always easy, because it commonly required a combination of a Splitter and three Panel controls, all of which needed to be docked in the correct order. If you needed to split a window in more than one way, the task became even more awkward. Thankfully, .NET 2.0 streamlines the process with a SplitContainer control.

Note: Split windows are easier than ever now that the SplitContainer control replaces the bare-bones Splitter.

3.9.1. How do I do that?

Essentially, the SplitContainer control represents two panels separated by a splitter bar. The user can drag the bar to one side or another to change the relative amount of space given to each section. To help signal the availability of this functionality, the mouse pointer switches from a single- to a double-headed arrow icon when the user mouses over the splitter bar.

Note: A SplitContainer control is often used when the content in the two panels is related. When the user makes a selection in the first panel, the content in the second is refreshed.

To create a simple interface with the SplitContainer, you should first decide how much screen real estate the SplitContainer will occupy. For example, if you need to reserve some space below the SplitContainer, start by docking a Panel to the bottom of the form. When you add the SplitContainer, its Dock property will automatically be set to DockStyle.Fill so that it fills whatever space is left over.

The SplitContainer always consists of two panels. If you set the Orientation property to Orientation.Vertical (the default), the splitter runs from top to bottom, creating left and right panels. The other option is Orientation.Horizontal, which creates top and bottom panels with a splitter bar running from left to right between them.

Once you've set the appropriate orientation, the next step is to add controls to each side of the SplitContainer. If you want a single control on each side, you simply need to drag the control to the appropriate panel in the SplitContainer and set the Dock property of the control to DockStyle.Fill, so that it fills all the available space between the splitter bar and the edges of the SplitContainer.

If you need to add more than one control in the same region of the SplitContainer, start by adding a Panel and setting the Dock property to DockStyle.Fill. Then, you can anchor other controls inside the Panel.

Once you've set up the SplitContainer, you don't need to write any code to manage the control resizing or user interaction. Figure 3-9 shows an example. (The complete SplitWindow project is available with the downloadable samples.)

Figure 3-9. A vertically split window

Note: You can also nest a SplitContainer inside another SplitContainer. This is most useful if you are using different orientations (for example, dividing a window into left and right regions and then dividing the region on the right into top and bottom compartments).

3.9.2. What about...

...restricting how a SplitContainer can be resized? The SplitContainer provides several properties tailored for this purpose. For example, you can set the Panel1MinSize and Panel2MinSize properties with the minimum pixel width of the appropriate panels. Once you set these properties, the user won't be able to move the splitter bar to a position that shrinks the panel to less than its minimum allowed size. You can also stop resizing altogether by setting the IsSplitterFixed property to False (in which case you can still adjust the position of the splitter bar by programmatically modifying the SplitterDistance property).

Additionally, you can configure how the SplitContainer behaves when the whole form is resized. By default, the panels are sized proportionately. However, you can designate one of the panels as a fixed panel by setting the FixedPanel property. In this case, that panel won't be modified when the form is resized. (For example, in Windows Explorer the directory tree is in a fixed panel, and it doesn't change size when you expand or shrink the window.) Finally, you can even hide a panel temporarily by setting the Panel1Collapsed or Panel2Collapsed property to true.

3.9.3. Where can I learn more?

For more details on the SplitContainer and some how-to tips, look up "SplitContainer Overview" in the index of the MSDN help reference.