To see how the grid mode works, place an Elastic control on a form, then set the following properties:
| Example Title |
Copy Code
|
|---|---|
Align = asFill ' 5 AutoSizeChildren = azGrid ' 8 ChildSpacing = 2 GridRows = 8 GridCols = 8 |
|
Your form will look like this:
The grid appears only at design time, to help you lay out the controls on the form. It is not visible at run time.
Now you can start placing controls on the form, approximately where you want them. They will snap to the nearest point on the grid. Place a few text boxes, for example, so the form will look like this:
Notice how the controls are automatically aligned, and how you can build fields that span multiple grid cells. If you resize the form now, the controls will resize automatically (as you probably expected).
Of course, the Tag Label feature of the Elastic still works, so if you set the Elastic's TagWidth property to 5000, CaptionPos to 6 - cpRightTop, and the Tag property on each control to a label, you will get a form that is practically ready to use:
Just for fun, set the Elastic's Font property to something like Tahoma 8, and set FontResize to True. Run the project and resize the form a few times. The font will be automatically resized, according to the form's new width and height.
If you would like to make the last column on the form a little narrower, hold down the shift and control keys, then click on the grid line and drag it to the right. The form will look like this:
You can move all grid lines around like that, at design time.
You can also designate certain grid lines as splitters, so users can resize fields with the mouse, at run time. To do it, hold down the shift and control keys, then right click on a grid line. You will get a menu with the following options:
Fixed Spacing
Splitter
Insert Division
Delete Division
Clean-up Grid
Click Splitter. The grid line will become dotted, indicating it will be used as a splitter at run time. You can do this with horizontal grid lines as well. Try to make the line between the State and Comments fields a splitter. The form should look like this:
Run the project and try out the splitter bars. They will move between the two adjacent grid lines, in the vertical or horizontal directions. Not too hard to do, and using only a single Elastic control to handle all the resizing.
To master the Elastic's new grid mode, there is one more capability we have not covered. You can make parts of the grid fixed, so they are not resized with the form. If you stretch the form shown above horizontally, you will get something like this:
The space on the left got stretched, but the labels are still the same size. This looks a little odd, and is a waste of space. To prevent this from happening, you can make the first two grid columns fixed, so they will not expand when the form is resized.
Stop the project, then hold down the shift and control keys and right-click on the first segment of any horizontal grid line. You should get the same popup menu you saw before.
Now click on Fixed Spacing. Repeat the operation for the next column. The Elastic will show that those columns are fixed by displaying locks across the top of the columns, like this:
Try running the form again and resizing it horizontally. This time, the label space will remain constant, and the text boxes will be stretched:
Remember, the regular Elastic properties still apply in grid mode. You can control the space around the grid with the BorderWidth and the width of the grid lines with the ChildSpacing properties.