Ui XML Reference\List

This frame cannot have a child frame.

A virtualized list in HScroll or VScroll. Virtual lists greatly improve the performance of long lists by only creating UI elements when the user scrolls. Elements outside of the scroll view won't be created or updated, saving on performance.

For Lua implementation and more, see Using Virtual Lists.

Example Usage

<!-- Virtual List -->
<VScroll layout="flex" heightPercent="100" width="500" frameImageColor="r: 0.8, g: 1, b: 1, a: 1">
    <ScrollContent padding="16">
        <Text text="Virtual List Begin" />
        <List id="virtual_list" itemName="MyItem" itemSize="50" itemCount="100" />
        <Text text="Virtual List End" />
    </ScrollContent>
</VScroll>

<!-- MyItem -->
<Frame layout="flex" height="50" widthPercent="100">
    <Text id="text" text="This is one entry." />
</Frame>

This XML produces the following UI:
image

Relevant Trigger Function(s):

This frame cannot have child frame.

itemName

Value type: string

Description


The name of the Ui to embed into the virtual list. Similar to include. See Using Virtual Lists.

Example Usage

<!-- Virtual List -->
<VScroll layout="flex" heightPercent="100" width="500" frameImageColor="r: 0.8, g: 1, b: 1, a: 1">
    <ScrollContent padding="16">
        <Text text="Virtual List Begin" />
        <List id="virtual_list" itemName="MyItem" itemSize="50" itemCount="100" />
        <Text text="Virtual List End" />
    </ScrollContent>
</VScroll>

<!-- MyItem -->
<Frame layout="flex" height="50" widthPercent="100">
    <Text id="text" text="This is one entry." />
</Frame>

This XML produces the following UI:
image

itemSize

Value type: number

Description


The height of each item in the virtual list. See Using Virtual Lists.

Example Usage

<!-- Virtual List -->
<VScroll layout="flex" heightPercent="100" width="500" frameImageColor="r: 0.8, g: 1, b: 1, a: 1">
    <ScrollContent padding="16">
        <Text text="Virtual List Begin" />
        <List id="virtual_list" itemName="MyItem" itemSize="50" itemCount="100" />
        <Text text="Virtual List End" />
    </ScrollContent>
</VScroll>

<!-- MyItem -->
<Frame layout="flex" height="50" widthPercent="100">
    <Text id="text" text="This is one entry." />
</Frame>

This XML produces the following UI:
image

itemCount

Value type: number

Description


The amount of items in the virtual list. See Using Virtual Lists.

Example Usage

<!-- Virtual List -->
<VScroll layout="flex" heightPercent="100" width="500" frameImageColor="r: 0.8, g: 1, b: 1, a: 1">
    <ScrollContent padding="16">
        <Text text="Virtual List Begin" />
        <List id="virtual_list" itemName="MyItem" itemSize="50" itemCount="100" />
        <Text text="Virtual List End" />
    </ScrollContent>
</VScroll>

<!-- MyItem -->
<Frame layout="flex" height="50" widthPercent="100">
    <Text id="text" text="This is one entry." />
</Frame>

This XML produces the following UI:
image