This is always a little confusing at first. In my opinion, the style names are poorly chosen. The gory details are all in the drawBackground()
method of the ItemRenderer
class.
The contentBackgroundColor
style is something you can set on the List
component itself, it has no effect on the renderer. It will fill in the background color of the list, but usually the renderers occupy all of that area, so you never see it. It would be visible, for example, if your list is tall but only has 1 or 2 items in it (thus the space at the bottom is not covered by a renderer).
To set the background color of a renderer:
Instead of using contentBackgroundColor
, use the alernatingItemColors
style. This style expects an array of values. If you only want one color, just put one element in the array:
alternatingItemColors="[#c0c0c0]"
From looking at the code in drawBackground()
, if you want to set an alpha on the background color, you have to draw the background yourself (see below).
Other background related styles you might wish to set:
downColor
selectionColor
rollOverColor
To draw your own background colors:
Set the autoDrawBackground
property to false. This means you now have to draw your own colors for all of the various renderer states ("normal", "selected", "hovered", etc.). Fortunately, you can do that inside the renderer w/the same state syntax that you've used above on a background object of your choosing (a `Rect, etc.).
<s:ItemRenderer autodrawBackground="false">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:Rect id="theBackgroundObject" top="0" bottom="0" left="0" right="0">
<s:fill>
<s:SolidColor color="#FF0000" color.hovered="#00FF00"
alpha="1" alpha.hovered=".5" />
</s:fill>
</s:Rect>
</s:ItemRenderer>