The following example shows how you can alternate row colors in a List control using the alternatingItemColors style.

Full code after the jump

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/17/alternating-row-colors-in-a-flex-list-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Row 1" />
                <mx:Object label="Row 2" />
                <mx:Object label="Row 3" />
                <mx:Object label="Row 4" />
                <mx:Object label="Row 5" />
                <mx:Object label="Row 6" />
                <mx:Object label="Row 7" />
                <mx:Object label="Row 8" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:List id="list"
            alternatingItemColors="[0xEEEEEE, 0xDFDFDF]"
            dataProvider="{arrColl}"
            rowCount="4"
            width="200" />

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Alternating row colors in a Flex List control

  1. sharat87 says:

    Hello, sory to comment on such an old post, but I just wanted to know if it possible to alternate the background alphas of the items in the list in a similar manner?

    Great Example, really saved a lot of time :)
    sharat87

  2. mohammed says:

    yeh its simple…

  3. vibs says:

    great example. I really find your blog useful for providing me help for my flex related development. Pleas keep the good work.

  4. Anonymous says:

    Thanks for the post :)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree