Ui XML Reference\HScroll
A scrollable frame that stacks children frames horizontally. By default, this frame type attempts to fill its parent size unless given explicit dimensions. Unlike the Trigger API version, placing the child frames directly under the HScroll itself (omitting the ScrollContent) will still work.
To set padding and spacing for the child frames, the child frames should be placed in a ScrollContent element. Note that spacing only works in legacy layouts. If you wanted to achieve a similar effect in a flex layout, you would have to adjust the children. See FlexLayouts/Margins.
Example Usage
<!-- Flex version -->
<HScroll layout="flex" height="120" width="450" frameImage="frame01_blue">
<ScrollContent padding="10">
<Frame height="100" width="100" frameImage="cart" marginRight="10" />
<Frame height="100" width="100" frameImage="cart" marginRight="10" />
<Frame height="100" width="100" frameImage="cart" marginRight="10" />
<Frame height="100" width="100" frameImage="cart" marginRight="10" />
<Frame height="100" width="100" frameImage="cart" marginRight="10" />
<Frame height="100" width="100" frameImage="cart" />
</ScrollContent>
</HScroll>
<!-- Legacy version -->
<HScroll layout="legacy" height="120" width="450" frameImage="frame01_blue">
<ScrollContent spacing="10" padding="10">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</ScrollContent>
</HScroll>
This XML produces the following UI:
Related Trigger Function(s):
Related UI XML Properties:
inertia
Value type: boolean
Supports data binding
Description
The inertia status of the HScroll 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
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" inertia="false">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
decelerationRate
Value type: number
Supports data binding
Values: Real numbers >= 0
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
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" decelerationRate="0.5">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
HScroll deceleration from the above example usage:
Related Trigger Function(s):
reverse
Value type: boolean
Supports data binding
Description
The reverse status of the HScroll 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.
Only works in legacy layouts. For the flex layout equivalent, see FlexDirection.
Example Usage
<HScroll layout="legacy" height="120" width="300" frameImage="frame01_blue" reverse="true">
<Frame height="80" width="80" frameImage="cart" />
<Frame height="90" width="90" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="110" width="110" frameImage="cart" />
<Frame height="120" width="120" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
contentAlignment
Value type: string
Supports data binding
Values: left
or right
Description
The content alignment of the HScroll frame. This value determines where the initial display location of the scroll content is. Options are left
(default) and right
.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" contentAlignment="right">
<Frame height="80" width="80" frameImage="cart" />
<Frame height="90" width="90" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="110" width="110" frameImage="cart" />
<Frame height="120" width="120" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
snap
Value type: boolean
Values: Real numbers >= 0
Description
Changes whether the scroll frame snapping is on or off. When enabled, there are a suite of other attributes for adjusting the snap step size, step count, threshold, and speed. These attributes are useful if your scroll frame contains items of discrete sizes and you want your scroll frame to always snap to these elements rather then end up partially between two items.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" snap="true" snapStep="100" snapStepCount="6" snapBeginThreshold="100" snapSpeed="200">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
snapStep
Value type: number
Values: Real numbers >= 0
Description
The size of steps between snap points on scroll frame snapping. Most likely, you'll want to set this to the width of individual items within the scroll frame.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" snap="true" snapStep="100" snapStepCount="6" snapBeginThreshold="100" snapSpeed="200">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
snapStepCount
Value type: number
Values: Real numbers >= 0
Description
The number of steps. In the most common use case, you would want to set this to the number of children items.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" snap="true" snapStep="100" snapStepCount="6" snapBeginThreshold="100" snapSpeed="200">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
snapBeginThreshold
Value type: number
Values: Real numbers >= 0
Description
The threshold for scroll frame snapping. The threshold is how close a user has to scroll to the next step before they will snap to that step instead of the previous one.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" snap="true" snapStep="100" snapStepCount="6" snapBeginThreshold="100" snapSpeed="200">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>
Related Trigger Function(s):
snapSpeed
Value type: number
Values: Real numbers >= 0
Description
The speed the snapping to the next step will occur for scroll frames with snapping enabled.
Example Usage
<HScroll layout="flex" height="120" width="300" frameImage="frame01_blue" snap="true" snapStep="100" snapStepCount="6" snapBeginThreshold="100" snapSpeed="200">
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
<Frame height="100" width="100" frameImage="cart" />
</HScroll>