Ui XML Grid - BLKTower/TestWiki GitHub Wiki

Table of Contents

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.

Example Usage

<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: image

Related Trigger Function(s):

Related UI XML Properties:

Layout children frames in a grid

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 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>

Related Trigger Function(s):

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 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>

Related Trigger Function(s):

⚠️ **GitHub.com Fallback** ⚠️