Flexponential

The default spark List skin wraps the the underlying DataGroup with a Scroller component to easily provide scrolling functionality. Custom skinning the Scroller component isn’t very flexible; you can custom skin each scrollbar to change the visuals on them, but you can’t easily reposition them. In these cases it usually makes more sense to get rid of the Scroller and hook up the scrollbars directly.

One example of this is when you want a List that provides the ability to scroll up and down but want to move the buttons away from the right side. For example, placing the scroll buttons above and below the List content:

View Source

This was the approach I followed to get this behavior:

1. Copy the default ListSkin.mxml into CustomListSkin.mxml
2. Remove the Scroller (apply its top/left/right/clipAndEnableScrolling to the DataGroup below it)
3. Remove the references to the scroller in the script block at the top (see SDK-23653)
4. Add a VScrollBar and set its viewport to the underlying DataGroup
5. Position the VScrollBar to stretch to the entire size by setting top/left/bottom/right to 0
6. Increase top/bottom on the DataGroup to allow some space for the buttons
7. Copy the default VScrollBarSkin.mxml into CustomVScrollBarSkin.mxml
8. Tweak the VScrollBar skin to get rid of the track and the thumb and make the buttons 100% width
9. Change the minHeight on CustomListSkin to something smaller (optional: this is to allow for the following example)

Given this skin you can create a List that only shows one item at a time by setting requestedRowCount=1 on the layout:

View Source

Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.