Setting alternating colors on a Flex HorizontalList control

The following example shows how you can alternate item colors in a HorizontalList control in Flex by setting the alternatingItemColors style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Accordion"
                icon="@Embed('assets/Accordion.png')" />
        <mx:Object label="ApplicationControlBar"
                icon="@Embed('assets/ApplicationControlBar.png')" />
        <mx:Object label="Box"
                icon="@Embed('assets/Box.png')" />
        <mx:Object label="Canvas"
                icon="@Embed('assets/Canvas.png')" />
        <mx:Object label="ControlBar"
                icon="@Embed('assets/ControlBar.png')" />
        <mx:Object label="DividedBox"
                icon="@Embed('assets/DividedBox.png')" />
        <mx:Object label="Form"
                icon="@Embed('assets/Form.png')" />
        <mx:Object label="FormHeading"
                icon="@Embed('assets/FormHeading.png')" />
        <mx:Object label="FormItem"
                icon="@Embed('assets/FormItem.png')" />
        <mx:Object label="Grid"
                icon="@Embed('assets/Grid.png')" />
        <mx:Object label="HBox"
                icon="@Embed('assets/HBox.png')" />
        <mx:Object label="HDividedBox"
                icon="@Embed('assets/HDividedBox.png')" />
        <mx:Object label="Panel"
                icon="@Embed('assets/Panel.png')" />
        <mx:Object label="TabNavigator"
                icon="@Embed('assets/TabNavigator.png')" />
        <mx:Object label="Tile"
                icon="@Embed('assets/Tile.png')" />
        <mx:Object label="TitleWindow"
                icon="@Embed('assets/TitleWindow.png')" />
        <mx:Object label="VBox"
                icon="@Embed('assets/VBox.png')" />
        <mx:Object label="VDividedBox"
                icon="@Embed('assets/VDividedBox.png')" />
        <mx:Object label="ViewStack"
                icon="@Embed('assets/ViewStack.png')" />
    </mx:Array>

    <mx:HorizontalList id="horizontalList"
            dataProvider="{arr}"
            alternatingItemColors="[#FFFFFF, #EEEEEE]"
            columnCount="3"
            columnWidth="175"
            rowCount="1"
            height="100" />

</mx:Application>

View source is enabled in the following example.

You can also set the alternatingItemColors style using an external .CSS file or <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    HorizontalList {
        alternatingItemColors: #FFFFFF, #EEEEEE;
    }
</mx:Style>

Or, you can set the style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private function horizontalList_initialize(evt:FlexEvent):void {
            horizontalList.setStyle("alternatingItemColors", [0xFFFFFF, "#EEEEEE"]);
        }
    ]]>
</mx:Script>

<mx:HorizontalList id="horizontalList"
        dataProvider="{arr}"
        columnCount="3"
        columnWidth="175"
        rowCount="1"
        height="100"
        initialize="horizontalList_initialize(event);" />