Planning the form layout in VB.NET

Introduction

Most of you would have heard of, and even used the new anchoring and docking properties available to the windows form controls in VB.NET. They enable controls to resize or reposition themselves as the form resizes, without writing code.

I was definitely excited about these new features. Think of the huge amount of time saved writing stupid, nonproductive resizing code just to make the forms look the same.

But is all this as simple as it seems? Just set a few properties, and no code?

Let's delve in and find out. We will start out by designing the user interface shown below of my new experimental application -'An expense tracker'. (My 'Guinea pig' to learn dot net technology)

Now when it came to resizing controls first I started experimenting with the anchor and dock properties, but what the hell? Controls would either overlap or move away to opposite extremes of the form, or get jumbled up. Tried all possible stunts to no avail. If you set the anchor property, the dock property would vanish and vice versa. The controls never seemed to care about each other; all that they were concerned was either to stick to an edge of the form or to maintain a constant distance from the edges of the form.

During this process, I observed that there were controls, which could be grouped together, which needed to resize in the same way. This observation finally led me to the idea of using panels to group those controls, and did need to use a little code to get the desired effect. :(

But here is the good news; it is definitely a lot easier than resizing controls in VB6. I still got away writing just a couple of lines of code.

So let us go ahead building the form shown above. First of all we need to add three panels, which will resize in different ways.

Change the 'BackColor' properties of the panels as shown above so that it is easier to differentiate the panels. You can set it back to its default color once you are done.

Now first dock the Red panel (assuming that you have used the same colors) to the bottom of the form, next dock the Green panel to the left and lastly dock the Blue panel to the center to fill up rest of the area. Note that it is important you do the docking in the same order mentioned above; else you will not get the desired layout. Save your work and run the application, you will see that the panels are getting resized as you resize the form. Next you can go ahead and put in all controls as shown below.

Now let us start anchoring controls within the panels. Starting with the Green panel, (you can start with any of them.) we would want all the dropdown controls in the green panel to maintain the same constant distance from the top, left and right edges of the panel, and also expand horizontally as the form/panel expands.

Select all the dropdown controls in the green panel by holding down the 'Ctrl' key and clicking on each of them with the mouse. Now in the properties window, dropdown the anchor property and anchor the selected controls to Top, Left, and Right as shown below.

Note: you are not selecting the bottom anchor since you do not want the controls to expand vertically when the form is resized vertically.

Let the labels remain anchored to their default values Top, Left. Which means they will maintain a constant distance from the top and left edges of the form/panel.

Do the same thing for the blue panel. The red panel needs to behave a little differently. The textbox (set Multiline property of the textbox to True) needs to expand both horizontally as well as vertically when the form expands. So set the anchor property of the textbox to all four direction Top, Bottom, Left, and Right.

Anchor the label 'Remarks:' only to left, so that it sticks to the left edge and also repositions itself vertically at proportional distances from the top and bottom edges of the panel.

Next the two buttons 'Save' and 'Cancel' needs to be anchored to the bottom-right corner as shown below.

Now go ahead now, save your work and hit F5. You see that the controls are getting resized along with the form. Bingo!!! , You did all this without writing a single line of code. Now see what happens when you maximize the form… Hey! Wait a minute; this is not exactly what we wanted….

What exactly is happening here is that, the blue and the green panels are not resizing horizontally in equal proportion. Since the green panel is set to dock to the left and the blue panel is set to fill up the remaining horizontal area, we see that this is exactly what is happening. The same thing is happening to the red panel as well, it is docking itself to the bottom and the other two panels are taking up the rest of the space vertically.

This is where a little code comes into play. To ensure that the panels resize in the desired manner we have to do two things:

1. We have to change the width of the green panel proportionally to the change in width of the form.



2. The height of green and the blue panels should remain constant. Which means we have to change the height of the red panel by the same value as the height of the form changes.

To accomplish the above tasks, do the following.

1. Declare these form level variable.
   VB

   Private Const GreenPanelHeight As Integer = 117
   Private Const FormHgtMinusRedPanelHgt As Integer = 232 - 88 'formHgt - PanelHgt
   Private PrevFormWidth As Integer = 430

2. Put the following code in the form resize event.
   VB

   Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) _
                            Handles MyBase.Resize
    Dim WidthRatio As Double = (Me.Size.Width / PrevFormWidth)
      GreenPanel.Size = New System.Drawing.Size(GreenPanel.Size.Width * WidthRatio, _
                                                GreenPanelHeight)
      PrevFormWidth = Me.Size.Width
      RedPanel.Size = New System.Drawing.Size(RedPanel.Size.Width, _
                                              Me.Size.Height - FormHgtMinusRedPanelHgt)
   End Sub

Now save your work and run the application. You see that the form is working just as desired.

Now you can set the BackColor property of the panels back to its default values. Also set the MinimumSize property of the form such that all controls are visible and usable.