Every Windows user has seen and used Windows Explorer to manage files and folders. It has two main components, a TreeView control on the left and a ListView control on the right. Resize these by dragging the vertical bar between them with the mouse in horizontal directions.
|Figure 2: This type of Windows Explorer user interface is made easily in .NET.
You can create a similar interface without writing a single line of code (Figure 2).
- Start a new Windows application and place a TreeView control on the form.
- In the Properties window, set the Dock property of the TreeView control to Left.
- Drag the Splitter control and place it on the right side of the TreeView control. The Splitter controls docks to the left by default, but you can dock it to any other edge, if you like. Make sure that the Splitter is as thin as possible.
- Place a ListView control on the right side of the Splitter control and set the Dock property to Fill so that it occupies the remaining area of the form (Figure 2).
When you run the application, notice that the cursor changes when you hover the mouse over the position where you placed the Splitter control. You will be able to resize the controls as desired.
An Outlook User Interface
Another classic user interface is the Outlook Express user interface. This is similar to designing the Windows explorer interface, except that there are two controls on the right, a ListView, and a RichTextBox control, both of which can be resized vertically.
|Figure 3: This is how your panels should look after following the previous steps.
- Start a new Windows application and place a TreeView control and a Splitter control on the form as you did for the Windows Explorer interface.
- Place a Panel on the right side of the Splitter and dock it to fill up the remaining area. Use this Panel as a container to dock the ListView and RichTextBox controls. I have changed the BackColor Property of the Panel to DarkGrey for better visiblity.
- Place a ListView control on the Panel and dock it to the Top. Adjust the height as desired.
- Place a Splitter control on the Panel. By default, it docks to the Left edge of the Panel. Change this to dock to the Top, and make sure it is thin.
- Place a RichTextBox Control on the Panel below the Splitter control so that it fills up rest of the area (Figure 3).
Now, your interface is ready.