Styling the horizontal and vertical scroll bars on a Spark List control in Flex 4

The following example shows how you can set a base theme color on a Spark List control’s horizontal and vertical scroll bar by setting the chromeColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|ScrollBarBase {
            chromeColor: haloOrange;
        }
    </fx:Style>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

[GoogleAdsWide]

View source is enabled in the following example.

If you wanted to style the horizontal scroll bar and vertical scroll bar separately, you could apply styles to the s|HScrollBar and s|VScrollBar separately instead of using the generic s|ScrollBar selector, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_chromeColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|VScrollBar {
            chromeColor: haloGreen;
        }
 
        s|List s|HScrollBar {
            chromeColor: haloBlue;
        }
    </fx:Style>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

Or you could set the chromeColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
 
            private function init():void {
                lst.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.ON);
                lst.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
 
                lst.scroller.verticalScrollBar.setStyle("chromeColor", "haloGreen");
                lst.scroller.horizontalScrollBar.setStyle("chromeColor", "haloBlue");
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

4 thoughts on “Styling the horizontal and vertical scroll bars on a Spark List control in Flex 4

  1. Is it possible/feasible for you to post SWF’s with each post so we can see what you’re talking about? It would be very helpful :)

    1. Not always. Creating clean projects and exporting them with source and FTPing the result to the server requires lots of additional time that I don’t always have.

      In most cases, it’s easy enough to just copy/paste the code into Builder and run it yourself, as most examples don’t rely on additional images/files. I admit it isn’t as easy as just seeing it directly in the page, but with the Flex 4 SDK still in beta form, it was just too time consuming for me to constantly be updating examples AND reuploading SWFs over and over. Once the Flex 4.0 SDK is released I’ll try and upload more SWFs if possible.

      Peter

      1. I totally understand and I am really grateful for those times that you do upload a SWF! I know that the Flex SDK is rapidly changing so if you aren’t able to keep all 1231203 posts/swfs up to date on this site, it’s totally understandable. Thanks for all of your hard work!

Comments are closed.