the blog
Back to -Blog

Snap Flex Controls To Grid

How to Align or Size To Grid in the Amethyst Designer
by Huw Collingbourne
Monday 7 September 2009.

The Amethyst Designer provides you with a number of ways of aligning controls. Some of these functions are available on the Amethyst Layout toolbar while others are ‘built into’ the Designer and may be turned on or off by setting global options. In this article I want to look at one of these global options - the grid.

The Amethyst Designer gives you the choice of designing your user interface either on a blank background or on a grid. The grid is displayed only at design-time and does not appear in your finished application. The grid may be divided into perfectly square cells (say 32 x 32 pixels) or into cells with differing widths and heights (say 16 width x 32 height). Here, for example, I am using a dotted 30 x 10 grid:

Now I’ve switched to a solid 15 x 32 grid:

Notice, by the way, that you can optionally use alignment bars (the green bars that show which other controls line up with the control that you are dragging or resizing) at the same time as aligning to grid. If both alignment bars and ‘align to grid’ are enabled, the grid takes preference - that is, if a dragged control is not quite aligned with the grid, it will snap to the nearest grid-line when you release the mouse button.

You can select grid options in the Tools, Options, Amethyst Designer dialog:

If you change these global settings you will need to close down any windows containing the Designer and re-open them in order for the new settings to be used.

Align To Grid

The Amethyst Layout Toolbar gives you a couple of useful tools to make controls snap to the grid:

If the Amethyst Layout Toolbar is not visible, right-click the menu or toolbar area at the top of the Visual Studio workspace and ensure that ‘Amethyst Layout’ is checked.

Note that these ‘grid-snapping’ tools will work (using the active grid settings) even if the grid is not currently visible or if you have not enabled the ‘Snap to Grid’ option. This gives you the ability to make use of grid settings selectively without being obliged to use it continually.

- 1) Align To Grid

Here I have two buttons shown over a solid grid. I have not enabled ‘Snap to Grid’ so when I drag the buttons around their positions are not automatically aligned with the grid. Here, however, I have selected the buttons and I am about to click the ‘Align to Grid’ button in the Layout Toolbar:

This is what happens: the tops and the left-sides of the buttons snap to the nearest grid lines. Note that the buttons will snap in either direction (to the left or to the right, up or down) depending on which grid line is nearest to the button edge:

- 2) Size To Grid

The Size To Grid button has a different effect from Align To Grid. Here are the same two buttons in the same positions as before but this time I click Size To Grid:

Now it’s not just the positions of the buttons that are changed. Each side of each button snaps to the nearest grid line:

In this case, the left side of the first button moves towards the right and its right side moves to the left because the nearest grid lines are in those directions. The reverse is true for the second button. That is why the widths of the selected buttons change as a result of sizing them to grid. Be aware of this possibility if you size multiple controls to the grid. Often it is easier to size one control at a time.

If you want to size the controls to the grid in such a way that their sizes remain constant, try this: first select the controls and click the ‘Align To Grid’ button. When this has been done each control will be repositioned to align its top-left corner to the nearest grid lines - and that means that, if the controls are the same sizes then their right and bottom edges will all be at the same distance from the nearest grid lines. So when you now click ‘Size To Grid’ each control will be resized by the same amount as shown here:


Links

- Amethyst Download Page
- Overview of the Amethyst Designer

Bookmark and Share   Keywords:  Amethyst  visual design
© SapphireSteel Software 2014