Configure a vertical layout

To configure a horizontal layout, add a Horizontal layout object, add child objects, and adjust the properties.
  1. In
    Project view
    , right-click a node to contain the Vertical layout object and select
    New
    Containers
    Vertical layout
    .
  2. Add or move child graphic objects under the vertical layout.
    For more information on how to move graphic objects, see Move a node.
    For example, add buttons under the vertical layout to create a row of buttons. See Button.
    Child objects are distributed one by one in a column.
    Three buttons labeled Button1, Button2, and Button3 arranged vertically in a single column, aligned to the top of a grid background.
  3. (optional) In
    Properties
    , set how to distribute the child graphic objects:
    • Content alignment
      :
      • Top aligned
        . Anchor children objects to the top of the vertical layout.
        Three buttons labeled Button1, Button2, and Button3 arranged vertically at the top of a grid background.
      • Center aligned
        . Anchor child objects to the center of the vertical layout.
        Three buttons labeled Button1, Button2, and Button3 arranged vertically and centered within the vertical layout on a grid background.
      • Bottom aligned
        . Anchor child objects to the right of the vertical layout.
        Three buttons labeled Button1, Button2, and Button3 arranged vertically at the bottom of a grid background.
    • Wrap
      . Wrap child objects if they cannot fit the vertical layout height.
      Wrap set to True
      Three buttons labeled Button1, Button2, and Button3 arranged in two rows, with Button1 and Button3 in the top row and Button2 below, showing wrapping due to limited height.
      Wrap set to False
      Three buttons labeled Button1, Button2, and Button3 arranged vertically in a single column without wrapping on a grid background.
    • Horizontal gap
      . Horizontal space between the columns of wrapped child objects of the vertical layout.
      Three buttons labeled Button1, Button2, and Button3 arranged in two columns with visible horizontal space between columns on a grid background.
    • Vertical gap
      . Vertical space between child objects of the horizontal layout.
      Three buttons labeled Button1, Button2, and Button3 arranged vertically with increased vertical space between each button on a grid background.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal