How often have you created a user interface layout and found that you need to change the order in which the elements appear?

It happens to me all the time!

The usual way to do this involves creating (or finding) a bit of space somewhere, moving one bunch of elements and controls into the space, shuffling all the other elements around and then closing up the space again. It can be a bit of a hassle sometimes.

Even a simple task of exchanging the positions of two elements can be fiddly when you need to get them properly aligned in their new places and they’re in each other’s way.

So we created the “Swap Element Positions” feature in GUI Design Studio v3.1 to address this common need and save a ton of time and fiddling about.

It’s easiest to demonstrate with this contrived dialog example but the technique is equally suitable for panels and icons in toolbars, on Web pages and anywhere else you need to quickly re-arrange things.

To swap the Middle and Bottom control groups, the 2 Group Boxes are selected (in any order) and after applying the “Swap Element Positions” command (Alt+S), this is what happens:

All of the control elements within the groups have also been moved. Crucially, though, the positions of the Group Boxes themselves have been adjusted to take account of the difference in heights of the groups. Job done in two steps and about 3 seconds!

But what happens to the Middle group when we want to swap the Top and Bottom groups?

As you can see, the groups have all been correctly re-arranged to take account of all the height differences and what lies between the elements being swapped. The same rules apply for horizontal re-arrangement and combinations of the two.

In some cases, you might need to use the feature a few times to ‘bubble-sort’ your elements for the ordering you need but even this will be much faster than manual re-arrangement.

It won’t solve every case but it’s a very handy tool to have at your side and, if things do go wrong, there’s always the Undo command that will leave you no worse off than having to do it manually anyway.

Let us know how you get on with the “Swap Element Positions” feature and if you find cases that don’t work for you and we’ll see if we can improve the feature.