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:
Relevant Trigger Function(s):
- DCEI.CreateListFrame
- DCEI.SetListFrameItemName
- DCEI.SetListFrameItemSize
- DCEI.SetListFrameItemDataCallback
- DCEI.SetListFrameItemCount
- DCEI.RefreshListFrameItems
Related UI XML Properties:
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:
Related Trigger Function(s):
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:
Related Trigger Function(s):
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: