Ui XML Reference\Grid

Layout children frames in a grid automatically, based on the given cell width, cell height, frame width, and frame height. Grids require a cellWidth and cellHeight to be set. By default, this frame type attempts to fill its parent size unless given explicit dimensions. When setting up a grid with padding and spacing, make sure to account for the added width/height when setting the grid's width/height. Note that grids do not work with flex layouts.

Example Usage

<Grid layout="legacy" cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" frameImage="frame01_blue">
    <Frame height="50" width="50" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="150" width="150" frameImage="cart" />
</Grid>

This XML produces the following UI:
image

cellWidth

Value type: number

Supports data binding

Description


The grid cell width. This is the width of the automatically created cells in a grid. The content of the grid cell can overflow this cell width if the content width is greater than the cell width.

Example Usage

<Grid layout="legacy" cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" frameImage="frame01_blue">
    <Frame height="50" width="50" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="150" width="150" frameImage="cart" />
</Grid>

cellHeight

Value type: number

Supports data binding

Description


The grid cell height. This is the height of the automatically created cells in a grid. The content of the grid cell can overflow this cell height if the content height is greater than the cell height.

Example Usage

<Grid layout="legacy" cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" frameImage="frame01_blue">
    <Frame height="50" width="50" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="100" width="100" frameImage="cart" />
    <Frame height="150" width="150" frameImage="cart" />
</Grid>