لطفا منتظر باشید ...
Splitting Windows
One of the most recognizable user interface styles in applications today is the split window look (arguably popularized by Windows Explorer). In fact, split-window view applications are beginning to replace the former dominant paradigm of MDI, and Microsoft has led the change (although many developers, myself included, still favor MDI design for many large-scale applications).
In .NET, split-window designs are refreshingly easy to create, which is a dramatic departure from most other programming environments. To create a split window requires just three easy steps:
Start by docking a control to one side of the window.
Add the Splitter control, and dock it to the same side.
Add another control, and set its docking to Fill so it occupies the rest of the window.
The example in Figure 5-19 shows this technique with a TreeView and a ListView. By moving the position of the splitter bar at runtime, the user can change the relative size of these two controls.
Figure 5-19: A basic splitter bar
In this case, the window is somewhat claustrophobic. To improve the spacing, you can set a buffer using the form's DockPadding property. However, this won't add any extra spacing between the controls and the splitter bar—to add that, you need to anchor the ListView and TreeView in separate docked Panels, as you consider in the next example.
You can also set the SplitterBar.MinSize property to configure the smallest size (in pixels) to which the first docked control can be resized. You can also set the SplitterBar.MinExtra property to configure the minimum size for the controls on the other side of the splitter.
Docking with Panels
Rather than docking specific controls, as in the preceding example, it's more common to dock two Panel controls, one on each side of the splitter bar. That way, you can include several controls together in the Panel, and fine-tune their spacing. You can then use anchoring to cause the controls inside the Panel to resize themselves to fit its contents. This is where docking and container controls really begin to become useful.
Figure 5-20 shows an example taken from Chapter 9, which uses a customized TreeView/ListView explorer.
Figure 5-20: Advanced docking
The panel on the left includes a single TreeView, but the panel on the right includes two label controls spaced inside a panel to give a pleasing border around the label text. (If the same window simply used a single label control with a border, the text in the label would sit flush against the border.) The horizontal rule and Close button at the bottom of the window aren't included in the resizable portion of the window. Instead, they are anchored in a separately docked panel, which is attached to the bottom of the form.
To implement this design, a panel control is first docked to the bottom to hold the Close button. Then, the TreeView, SplitterBar, and ListView controls are docked to fill the upper portion of the window. The diagram in Figure 5-21 shows the docking.
Figure 5-21: A docking strategy
When designing this user interface, you may find that Visual Studio .NET is a little inflexible. If you dock the panels in the wrong order, you won't achieve the desired effect, and you'll need to copy all the controls to another form, and add the panels back one at a time in the correct docking order. Of course, the professional finished result is worth this minor aggravation.
Other Split Windows
Another reason to split a window is to provide two different views of the same data. Consider the example shown in Figure 5-22, which shows an HTML page using Microsoft's ActiveX web browser control and an ordinary text box. In this case, the splitter is docked to the top of the control, and becomes a horizontal bar.
Figure 5-22: A split view on a single document
You could also add another vertical splitter to create a compound view. For example, consider Figure 5-23, which provides a list of HTML files the user can select from.
Figure 5-23: Multiple splits
One of the best characteristics of docked designs is that they easily accommodate hidden or modified controls. For example, Figure 5-24 shows an alternate design that allows the file selection panel to be collapsed and then restored to its original size with the click of the button. The contents of the window automatically resize themselves to accommodate the additional portion when it is displayed.
Figure 5-24: A collapsible split window
The code for this operation is trivial:
private void cmdHide_Click(object sender, System.EventArgs e)
{
pnlFileList.Visible = false;
pnlShow.Visible = true;
}
private void cmdShow_Click(object sender, System.EventArgs e)
{
pnlShow.Visible = false;
pnlFileList.Visible = true;
}
This sample is included in the code for this chapter with the project name HTMLSplitWindow.
Tip
When designing a split window, it is best to start by creating and docking panel controls. Otherwise, if you need to modify your design, you may need to start over.When using panels, you can always add any controls you require simply by dropping them inside the appropriate panel.
