Skip to main content

GridLayout

Purpose​

The GridLayout places ViewTemplates or referenced Views in a grid. It is suitable when multiple elements should be arranged in rows and columns instead of a single vertical or horizontal flow.

Behavior​

Placement is determined by the order of the ViewTemplates in the Designer's Navigator window. They are filled into the grid line by line, from top to bottom.

The grid is defined by the number of columns via property columnCount and by the number of rows via property rowCount. Optionally, rowHeight can be set. In most cases, only columnCount needs to be defined, while rowCount and rowHeight remain at their default values. Then the number of rows is calculated automatically and rowHeight is optimized.

important

In some ADITO versions, property rowHeight does not appear until the value of columnCount has been changed at least once. Furthermore, the automatic calculation of rowCount and rowHeight may fail. In such cases, set columnCount and rowCount, and if required rowHeight, explicitly.

Configuration​

  • columnCount: Determines how many columns the grid should have.
    note

    This value is only used for desktop devices. On mobile devices, the grid always uses one single column.

  • rowCount: Determines the number of rows to be displayed in the grid. If left in the default state, this property is adjusted automatically when ViewTemplates are added or removed.
    note

    If you set this property explicitly, you should also consider setting rowHeight.

  • rowHeight: Defines the height of one row in pixels.
    note

This property should only be used together with an explicitly set rowCount. :::

Implementation hints​

In some ADITO versions, rowHeight does not appear until columnCount has been changed at least once. If automatic row calculation does not produce the expected result, set columnCount, rowCount, and if required rowHeight explicitly.

columnCount is only used on desktop devices. On mobile devices, the grid always uses one single column.

Notes​

GridLayout is especially useful when several ViewTemplates should be visible at the same time and their arrangement should remain spatially structured on larger screens.