How to: Create a Multipane User Interface with Windows Forms Using the Designer
In the following procedure, you will create a multipane user interface that is similar to the one used in Microsoft Outlook, with a Folder list, a Messages pane, and a Preview pane. This arrangement is achieved chiefly through docking controls with the form.
When you dock a control, you determine which edge of the parent container a control is fastened to. Thus, if you set theproperty to , the right edge of the control will be docked to the right edge of its parent control. Additionally, the docked edge of the control is resized to match that of its container control. For more information about how the Dock property works, see .
This procedure focuses on arranging theand the other controls on the form, not on adding functionality to make the application mimic Microsoft Outlook.
To create this user interface, you place all the controls within a SplitContainer control, which contains acontrol in the left-hand panel. The right-hand panel of the SplitContainer control contains a second SplitContainer control with a control above a control. These SplitContainer controls enable independent resizing of the other controls on the form. You can adapt the techniques in this procedure to craft custom user interfaces of your own.
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see.
To create an Outlook-style user interface at design time
Create a new Windows Application project. For details, see.
Drag a SplitContainer control from the Toolbox to the form. In the Properties window, set the Dock property to.
Drag a TreeView control from the Toolbox to the left-hand panel of the SplitContainer control. In the Properties window, set the Dock property toby clicking the left hand panel in the value editor shown when the down arrow is clicked.
Drag another SplitContainer control from the Toolbox; place it in the right-hand panel of the SplitContainer control you added to your form. In the Properties window, set the Dock property to Fill and theproperty to .
Drag a ListView control from the Toolbox to the upper panel of the second SplitContainer control you added to your form. Set the Dock property of the ListView control to Fill.
Drag a RichTextBox control from the Toolbox to the lower panel of the second SplitContainer control. Set the Dock property of the RichTextBox control to Fill.
At this point, if you press F5 to run the application, the form displays a three-part user interface, similar to that of Microsoft Outlook.
When you put the mouse pointer over either of the splitters within the SplitContainer controls, you can resize the internal dimensions.
At this point in application development, you have crafted a sophisticated user interface. The next step is proceeding with the programming of the application itself, perhaps by connecting the TreeView control and ListView controls to some kind of data source. For more information about connecting controls to data, see.