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