Aligning Widgets

As an application designer, you can align the position of multiple widgets when designing an application to improve your work efficiency and design accuracy.

To align widgets, first select all the widgets that you want to reposition. Then, in the quick menu to the right of the selected area, click the (Align Widgets) icon and select one of the following options from the quick menu according to your needs:

  • Align Left: align the left edge of each selected widgets to the leftmost edge of all selected widgets.

  • Align Right: align the right edge of each selected widgets to the rightmost edge of all selected widgets.

  • Align Top: align the top edge of each selected widgets to the topmost edge of all selected widgets

  • Align Bottom: align the bottom edge of each selected widgets to the bottommost edge of all selected widgets.

  • Align Middle: center the selected widgets horizontally by aligning their vertical center axis.

  • Align Center: center the selected widgets vertically by aligning their horizontal center axis.

  • Distribute Horizontally: make the selected widgets equidistantly in horizontal direction.

  • Distribute Vertically: make the selected widgets equidistantly in vertical direction.

Note

The height or width of the widget will not change whether you define it as auto, pixel or percentage values.

You can define the left, right, top or bottom margin of the widgets as auto, pixel or percentage values too. However, when you align widgets, such settings of the widgets' position may change under different conditions. Take aligning widgets to the leftmost edge as an example:

  • If the left margins of one or more widgets are defined as pixel, or if the left margins of all widgets are defined as auto, after you align the left edges, the unit of the left margins of all widgets will be changed to pixel.

  • If no widget’s left margin is defined as pixel and the left margins of one or more widgets are defined as percentage, after you align the left edges, the unit of the left margins of all the widgets will be changed to percentage.

This rule applies the same when you align widgets to right, top and bottom.