Designing Resizable Windows Forms in Visual Studio .NET

• Download demo project - 6.81 Kb

Introduction

Designing resizable forms in managed VS7 Windows applications is very simple - we don't need a layout manager, just use Splitter and Panel controls, new Dock and Anchor properties, and a few lines of code to get resizable forms in any configuration.

Consider a Windows form which contains:

• StatusBar with number of panels.
• TreeView control which may be resized using Splitter.
• ListView control which may be resized using Splitter Picture Box (shown with blue color) which should be always square.
• RichTextBox control which should fill all place remaining from the PictureBox.

Such a form is shown below in two different states:

Here are the steps to make the form:

1. Create new managed Windows application. In my sample, I use C#.
2. Add StatusBar control to the form (in my sample, the control's name is statusBar).
3. Set its Dock property to Bottom.
4. Set StatusBar ShowPanels property to true.
5. Add number of panels to the StatusBar.
6. Set the BorderStyle of the first panel to Raised, BorderStyle of the last panel to None.
7. Set the Text of the last panel to "" and the width to 20. This panel is a placeholder for the Resize Grip. The width of the first panel will be set dynamically at run time.
8. Set the BorderStyle of all other panels to Sunken.
9. Add the function ResizeStatusBar to the form:

       // Resize status bar (keep all panels except first in right side).
       private void ResizeStatusBar()
       {
           int n = statusBar.Panels.Count;
   
           if ( n > 1 )
           {
               int nRightWidth = 0;    // width of panels 1,2...
   
               for ( int i = 1; i < n; i++ )
               {
                   nRightWidth += statusBar.Panels[i].Width;
               }
   
               if ( statusBar.Panels[0].MinWidth < statusBar.Width - nRightWidth )
               {
                   statusBar.Panels[0].Width = statusBar.Width - nRightWidth;
               }
           }
       }

10. Add the Load and Resize message handlers to the form and call ResizeStatusBar from them.
11. Add a Splitter control to the form (splitStatus). Set its Dock property to Bottom and Enable property to false. Result - the Splitter is placed between the StatusBar and the other part of the form and cannot be moved at run time.
12. Add the Panel control (panelTop) to the top part of the form and set its Dock property to Fill.
13. Add the TreeView control (treeView) to the top part of the form and set its Dock property to Left.
14. Add the Splitter control (splitTop) to the top part of the form. Its Dock property is automatically set to Left. Set Splitter to desired position (to do this, resize TreeView control).
15. Add the ListView control (listView) to the right part of the form. Set its Dock property to Top. In my sample, I set its View property to Details and added the number of columns.
16. Add the Splitter control (splitRight) to the right part of the form, under the ListView control. Set its Dock property to Top.
17. Add the Panel control (panelRightBottom) to the right part of the form, under the Splitter, and set its Dock property to Fill.
18. Add the PictureBox control (pictureBox) to the right-bottom part of the form and set its Anchor property to Top, Bottom, Left. Fill its image (in the sample, I just changed the control's background color).
19. Add the RichTextBox control (richTextBox) to the form near the PictureBox and set its Anchor property to Top, Bottom.
20. Add the function ResizeRightBottomPanel to the form:

        // Resize controls in right-bottom panel.
        // Ensure that image is always square and text box
        // fills other part of panel.
        private void ResizeRightBottomPanel()
        {
            pictureBox.Width = pictureBox.Height;
    
            richTextBox.Left = pictureBox.Right + 10;
            richTextBox.Width = richTextBox.Parent.Width - richTextBox.Left;
        }

21. Add the Resize message handler for the panelRightBottom control. Call ResizeRightBottomPanel from it. Make the same call also from Form1_Load and Form1_Resize.