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
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:
- We have to change the width of the green panel proportionally to the
change in width of the form.
- 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.
- Declare these form level variable.
Private Const GreenPanelHeight As Integer = 117
Private Const FormHgtMinusRedPanelHgt As Integer = 232 - 88
Private PrevFormWidth As Integer = 430
- Put the following code in the form resize event.
Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) _
Dim WidthRatio As Double = (Me.Size.Width / PrevFormWidth)
GreenPanel.Size = New System.Drawing.Size(GreenPanel.Size.Width * WidthRatio, _
PrevFormWidth = Me.Size.Width
RedPanel.Size = New System.Drawing.Size(RedPanel.Size.Width, _
Me.Size.Height - FormHgtMinusRedPanelHgt)
Now save your work and run the application. You see that the form is working
just as desired.
Now you can set the
property of the panels back to its default
values. Also set the
property of the form such that all controls
are visible and usable.