Library tutorials & articles

Planning Form Layout in VB.NET

The solution

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.

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

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.

 

Comments

  1. 01 Sep 2008 at 12:58

    It is difficult to design fairly complicated forms by simply using anchors and docks. .Net provides two layout manager Flow layout panel and Table Layout Panel. However you need to use a good layout manager for professional form designing, e.g. SmartLayouts .

  2. 28 Oct 2003 at 05:21

    I would use 4 panels in the following way:
    1) one up (this is the extra panel that is not in your example). Set the Dock property to this one to Top and set the Height to whatever you want.
    2) The Green panel will be inside the panel one. Set the Dock property to Left and set the Width to whatever you want
    3) The Bleu panel also inside the panel one. Set the Dock property to Fill.
    4) The fourth panel (the Red one) comes bottom (as child of the form) with Dock set to Fill. (this is also a difference to your example)


    The rest of the things are the same.
    What we have accomplished with the fourth panel ? The fact that the Height of the Blue/Green panels is fixed to the height of the Panel One, so no coding is necessary to keep the height fix.


    The only problem left is that the Width of the Green panel is fixed and when the form is made wider it does not resize. So the only code necesary is to make the
    Green panel wider according with the width of the form.


    Best regards,
    Dan

  3. 15 Dec 2002 at 07:55

    good work - and helpful!

  4. 07 Mar 2002 at 23:58


    Good one ! Keep it up ...

  5. 07 Mar 2002 at 03:05

    This is very very very nice


    [6]keep it up[/6]


    good work


  6. 01 Jan 1999 at 00:00

    This thread is for discussions of Planning Form Layout in VB.NET.

Leave a comment

Sign in or Join us (it's free).

AddThis

Related jobs

Events coming up

  • Dec 6

    Developing AJAX Web Applications with Castle Monorail

    London, United Kingdom

    Monorail is the model-view-controller engine of the Castle Project, bringing many of the best ideas of Ruby on Rails to the .NET world. In this talk, David De Florinier and Gojko Adzic show how Monorail makes it easy to develop .NET based AJAX applications, and how to use the Castle Project to build Web 2.0 applications effectively. Come to this session if you are a .NET web developer. Everyone is welcome!