Ui XML VScroll - BLKTower/TestWiki GitHub Wiki

Table of Contents

Ui XML Reference\VScroll

A scrollable frame that stacks children frames vertically. By default, this frame type attempts to fill its parent size unless given explicit dimensions. To set padding and spacing for the child frames, the child frames should be placed in a ScrollContent element. Unlike the Trigger API version, placing the child frames directly under the VScroll itself (omitting the ScrollContent) will still work.

Example Usage

<VScroll height="200" width="120" backgroundImage="frame01_blue">
    <ScrollContent spacing="10" padding="10">
        <Frame height="100" width="100" backgroundImage="cart" />
        <Frame height="100" width="100" backgroundImage="cart" />
        <Frame height="100" width="100" backgroundImage="cart" />
        <Frame height="100" width="100" backgroundImage="cart" />
    </ScrollContent>
</VScroll>

This XML produces the following UI: image

Related Trigger Function(s):

Related UI XML Properties:

A scrollable frame that stacks children frames vertically

inertia

Value type: boolean

Supports data binding

Description

The inertia status of the VScroll frame, where true is enabled and false is disabled. Inertia is set to true by default. Inertia causes the scroll frame's scrolling to slow by the given deceleration rate, to a stop, after the mouse is released. If inertia is disabled the frame does not continue scrolling after the mouse is released.

Example Usage

<VScroll height="300" width="120" backgroundImage="frame01_blue" inertia="false">
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
</VScroll>

Related Trigger Function(s):

decelerationRate

Value type: number

Supports data binding

Description

The deceleration rate for the inertia, if enabled. A value of 0 will cause instant deceleration (equivalent to setting the inertia to false). Values between 0 and 1 will cause deceleration. A value of 1 will cause no deceleration. A value greater than 1 will cause acceleration. A negative value will break the scroll element.

Example Usage

<VScroll height="300" width="120" backgroundImage="frame01_blue" decelerationRate="0.5">
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
</VScroll>

VScroll deceleration from the above example usage: VScrollDecel

Related Trigger Function(s):

reverse

Value type: boolean

Supports data binding

Description

The reverse status of the VScroll frame, where true reverses the order in which child frames are added (the last created frame will be the first frame displayed) and false displays child frames normally.

Example Usage

<VScroll height="300" width="120" backgroundImage="frame01_blue" reverse="true">
    <Frame height="80" width="80" backgroundImage="cart" />
    <Frame height="90" width="90" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="110" width="110" backgroundImage="cart" />
    <Frame height="120" width="120" backgroundImage="cart" />
</VScroll>

Related Trigger Function(s):

contentAlignment

Value type: string

Supports data binding

Description

The content alignment of the VScroll frame. This value determines where the initial display location of the scroll content is. Options are top (default) and bottom.

Example Usage

<VScroll height="300" width="120" backgroundImage="frame01_blue" contentAlignment="bottom">
    <Frame height="80" width="80" backgroundImage="cart" />
    <Frame height="90" width="90" backgroundImage="cart" />
    <Frame height="100" width="100" backgroundImage="cart" />
    <Frame height="110" width="110" backgroundImage="cart" />
    <Frame height="120" width="120" backgroundImage="cart" />
</VScroll>

Related Trigger Function(s):

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