Click here to Skip to main content
Click here to Skip to main content

Planning the form layout in VB.NET

By , 6 Mar 2002
Rate this:
Please Sign up or sign in to vote.

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. Frown | :(

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.
    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.
    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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Benny K. Mathew
Web Developer
India India
Benny Mathew is the Founder, CEO of Seamless Integration Solutions Pvt. Ltd. He has 10+ years of formal experience in the IT industry and has provided services to many of the well known multi-national companies. He was also an MVP (Microsoft Most Valuable Professional) for two consecutive years. Prior to starting Seamless Integration Solutions, he was with Two Connect Inc. (Miami, FL), as a Solutions Architect. His work experience also includes working for IBM Global Services (India), Hewlett Packard (India Software Operations), Thomson Financials (Bangalore), and Delphi Software & IT Pvt. Ltd. (Bangalore).
 
He is also a prolific writer and has co-authored several books and articles on .NET and BizTalk 2004/2006 for leading book publishers and developer portals such as Packt Publishing, Wrox Press, Apress, DevX, ASPToday, CSharpToday and DeveloperFusion. During his free time, Benny likes to read and write blogs and help people on the newsgroups related to BizTalk.
 
His fascination for computers started at the age of 14, when he first learnt to program on a Sinclair ZX Spectrum+, which also motivated him to relentlessly pursue his formal education in computers that culminated with a Masters in Computer Applications from University of Mysore, India.
 
You can reach him at:
Website : http://www.seamless.in
Blog: http://GeeksWithBlogs.net/benny

Comments and Discussions

 
GeneralMy vote of 5 PinmemberKamonth17-Jan-13 20:34 
GeneralMy vote of 5 Pinmembermanoj kumar choubey21-Mar-12 20:04 
GeneralEven easier way with no code Pinmemberstuartprescott6-Sep-06 1:41 
QuestionRe: Even easier way with no code PinmemberTheSoddy30-Nov-06 16:13 
GeneralEasy trick PinsussNewbee DOTNET16-Jan-03 23:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 7 Mar 2002
Article Copyright 2002 by Benny K. Mathew
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid