Alternating tile background colors for items in a TileList control in Flex

The following example shows how you can set alternating background colors for tiles in a Flex TileList control by setting the

alternatingItemColors

style using MXML, CSS or ActionScript.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->

<mx:Application name="TileList_alternatingItemColors_test"

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="One" />

<mx:Object label="Two" />

<mx:Object label="Three" />

<mx:Object label="Four" />

<mx:Object label="Five" />

<mx:Object label="Six" />

<mx:Object label="Seven" />

<mx:Object label="Eight" />

<mx:Object label="Nine" />

<mx:Object label="Ten" />

<mx:Object label="Eleven" />

<mx:Object label="Twelve" />

</mx:Array>

</mx:source>

</mx:ArrayCollection>

<mx:TileList id="tileList"

dataProvider="{arrColl}"

columnCount="4"

columnWidth="120"

rowCount="3"

rowHeight="80"

alternatingItemColors="[#FFFFFF,#CCCCCC,#999999]" />

</mx:Application>