Scroll Bar
SmartUI Scroll-Bar Behavior operation and ACEs.
This is a composite and complex object, as it combines several SmartUI components to provide its functionality. It directly inherits its main features from a Container.
A scroll-bar is composed of four parts:
The scrollbar's origin must always be on the left side. The slider's position is adjusted from the origin, considering the scrollbar's angle, so you can rotate the bar at any angle to fit your design.
In the image above, we have a bar at the center that uses the Scrollbar behavior, a slider button (red square) that uses the Button behavior, and two scroll buttons to increase or decrease the value within the range, also using the Button behavior. All of these must be children of the scrollbar container.
The scroll buttons can be placed anywhere in the layout to fit your needs, as long as they are children of the scrollbar component.
To compose the scrollbar in the properties, use the component's name property. Under the scrollbar object hierarchy, there must be only one component that matches the name assigned to its functions.
Scroll buttons will always change the value by the number set in the Step Size field, regardless of whether the bar operates with floating values or integer values.
Please be aware that all the children of the component must have change propagation enabled for all attributes: visible, opacity, x, y, width, height, etc. Otherwise, you will need to manually control the children's attributes.
Properties
Property | Description |
| Enables or Disables the Scroll Bar. Value can still be set and it will change the Scroll Bar, but animations won't be triggered. You can use the IsEnabled condition to affect the look and feel when needed. |
| Marks if the component can have the focus. |
| Index of the element within a container. Used for focusing the elements in the sequence order. |
| Allows interactions for the component even if the object is invisible. It doesn't affect the visibility attribute of the object, you are responsible of turning it visible or invisible when needed. |
| Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check. |
| Unique name string for identifying the Scroll Bar |
| Fixed value increment for stepping-mode sliders. |
| Numeric value representing the current progress. |
| Minimum value. |
| Maximum value |
| Discrete mode handles floating values with discrete selection. Step mode handles integer values with precise location for the slider button. |
| Increment button name |
| Decrement button name |
| Slider button name |
Smart UI Scroll Bar behavior handles Scroll Bar UI components. Handles value ranges within a limit.
Actions
Set Enabled
Set Enabled
Disable/Enable the scroll bar
Parameter | Description |
| Enabled/Disabled |
Set Name
Set Name
Sets the name of the component.
Parameter | Description |
| Name of the component |
Set Focusable
Set Focusable
Sets the component to be able to receive the focus
Parameter | Description |
| Flag to allow the component to be focused. |
Set Focus
Set Focus
Sets the focus on the component, removing the focus from all the components within the same container.
Set Value
Set Value
Sets the current value of the Scroll Bar. If the value is below 0 or above the maximum, it will be clamped.
Parameter | Description |
| Numeric value representing the current progress |
Set Max
Set Max
Sets the maximum value of the Scroll Bar.
Parameter | Description |
| Maximum value. |
Set Min
Set Min
Sets the minimum value of the Scroll Bar.
Parameter | Description |
| Minimum value. |
Conditions
Is Enabled
Is Enabled
Returns true if the Scroll Bar is enabled
Compare Value
Compare Value
Compares the value of the Scroll Bar.
Parameter | Description |
| How to compare the variable |
| Value to compare the variable |
Compare Name
Compare Name
Returns true if the Scroll Bar components name equals the parameter
Parameter | Description |
| Name to compare with the component picked. |
undefined
undefined
undefined
Is Focused
Is Focused
Returns true if the scroll bar has the focus
On Value Change
On Value Change
Triggered when the Scroll Bar value changes. When dragging the slider, value will be set only when it's released.
Is Dragging
Is Dragging
True when the slider scroll bar is being dragged to set a value. Use DragValue expression to retrieve the value.
On Focus
On Focus
Triggered when the scroll bar gets the focus
On Focus Lost
On Focus Lost
Triggered when the scroll bar loses focus
Expressions
Value
Value
Scroll Bar current value.
DragValue
DragValue
Scroll Bar value while being dragged. Value becomes final after the user releases the slider. Always use Value expression to retrieve the correct value.
Progress
Progress
Scroll Bar progress value in percentage.
Min
Min
Scroll Bar Minimum value.
Max
Max
Scroll Bar Maximum value.
AnimatedValue
AnimatedValue
Current animated value. This value is set only when the animation is running. E.G. If you are changing the value from 0 to 10, it will contain all the step values to reach the 10, as if it was counting.
AnimatedProgress
AnimatedProgress
Percentage representing the AnimatedValue from the Max value allowed to be set for the Scroll Bar. This value is set only when the animation is running
Name
Name
Component name
(c) Pixel Perfect Studio 2024
Last updated