Ui XML Grid - funovus/editor-wiki GitHub Wiki
Table of Contents
- [Ui XML Reference\Grid](#ui-xml-referencegrid)
* [cellWidth](#cellwidth)
* [cellHeight](#cellheight)
|
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.
<Grid cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" backgroundImage="frame01_blue">
<Frame height="50" width="50" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="150" width="150" backgroundImage="cart" />
</Grid>
This XML produces the following UI:
Layout children frames in a grid
Value type: number
Supports data binding
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.
<Grid cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" backgroundImage="frame01_blue">
<Frame height="50" width="50" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="150" width="150" backgroundImage="cart" />
</Grid>
Value type: number
Supports data binding
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.
<Grid cellHeight="100" cellWidth="100" width="230" spacing="10" padding="10" backgroundImage="frame01_blue">
<Frame height="50" width="50" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="150" width="150" backgroundImage="cart" />
</Grid>