In the previous section we started with the grid, and then added controls.
You may prefer to work the other way around. Forget about the grid initially, and design your form the normal way. Then, when you are done, let the Elastic create the grid for you automatically.
Of course, once the grid is created you may still modify it with the design time commands we used earlier to tweak the grid's appearance and behavior.
For this second example, we will design a form that looks like a File Open dialog.
Start by placing an Elastic on the form and setting the following properties:
| Example Title |
Copy Code
|
|---|---|
Align = asFill ' 5 Appearance = apFlat ' 0 ChildSpacing = 0 ' Pixels TagWidth = 1000 ' Twips |
|
You cannot see the Elastic on the form anymore, but do not worry about it. Now add the controls that make up the File Open dialog. There is quite a few of them:
The form has a DriveListBox, four small command buttons, a ListBox, a TextBox, a ComboBox, and three big command buttons (Open, Close, Help). To get all these controls properly aligned, spaced, and sized, we used Visual Basic's Format menu quite a bit.
Instead of labels, we set the Tag property for a few of the controls. Because the Elastic's TagWidth property is set to 1000, the Elastic takes care of labeling the controls.
This is a good time to save your form, just in case (too bad there's no Undo for changes in the form layout).
Adding an Elastic Grid to this form is simply a matter of setting the Elastic's AutoSizeChildren to 8 - azGrid. The Elastic will realize that you are switching to grid mode, and since there are some controls already on the form it will create a grid automatically. Here is what the form looks like now:
The Elastic created a 13 by 10 grid and adjusted it to the controls it found on the form.
To finish this form, set the Fixed Spacing option for a few of the rows and columns, so the list box and text boxes resize with the form, but not the buttons.
To do this, hold down the shift and control keys, then right click on the grid lines and select the Fixed Spacing option. Red padlock icons will appear near the edges of the Elastic to show which parts of the grid are fixed. The finished form will look like this:
The form is ready. Run it and see what happens when you resize it.