How to use the HScrollBar and VScrollBar components
The HScrollBar and VScrollBar classes allow a user to select a numeric value in a specific range by dragging a thumb along the length of a track.
The Basics
Generally, scroll bars are created automatically by any container that supports scrolling. When creating custom components that support scrolling, you should generally extend
BaseScrollContainer.
Styles
The skins for the HScrollBar and VScrollBar components are divided into two main parts: the thumb and the track. The track may either fill the full length of the scroll bar, or it may be optionally divided in half — meeting at the center of the scroll bar's thumb.
Thumb
Style a scroll bar's thumb using the thumbSkin property. The following example sets it to a RectangleSkin instance.
var thumbSkin = new RectangleSkin();
thumbSkin.border = SolidColor(1.0, 0x999999);
thumbSkin.fill = SolidColor(0xcccccc);
thumbSkin.width = 32.0;
thumbSkin.height = 32.0;
scrollBar.thumbSkin = thumbSkin;
The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.
The scroll bar automatically calculates its preferred size based on the initial dimensions of its skins, so it's important to set a skin's width and height properties to appropriate values to use in this calculation.
See Skinning with common shapes for more details about how to use
RectangleSkinwith theLineStyleandFillStyleenums that change its border and fill appearance.
Track
Style a scroll bar's track using the trackSkin property. The following example sets it to a RectangleSkin instance.
var trackSkin = new RectangleSkin();
trackSkin.border = SolidColor(1.0, 0x999999);
trackSkin.fill = SolidColor(0xcccccc);
trackSkin.width = 120.0;
trackSkin.height = 32.0;
scrollBar.trackSkin = trackSkin;
By default, the trackSkin will fill the entire length of the scroll bar. In other words, it will fill the width of an HScrollBar, or it will fill the entire height of a VScrollBar.
To give the track different a appearance on each side of the thumb, set the optional secondaryTrackSkin.
var trackSkin = new RectangleSkin();
trackSkin.border = SolidColor(1.0, 0x999999);
trackSkin.fill = SolidColor(0xccccff);
trackSkin.width = 60.0;
trackSkin.height = 32.0;
scrollBar.trackSkin = trackSkin;
var secondaryTrackSkin = new RectangleSkin();
secondaryTrackSkin.border = SolidColor(1.0, 0x999999);
secondaryTrackSkin.fill = SolidColor(0xcccccc);
secondaryTrackSkin.width = 60.0;
secondaryTrackSkin.height = 32.0;
scrollBar.secondaryTrackSkin = secondaryTrackSkin;
On an HScrollBar, the trackSkin appears on the left side of the thumb, and the secondaryTrackSkin appears on the right side. On a VScrollBar, the trackSkin appears below the thumb, and the secondaryTrackSkin appears above the thumb.