ItemRenderer change background color

Question

I have an item renderer that I want to change default colors of:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                initialize="init(event)"
                creationComplete="created(event)"
                dataChange="created(event)"
                width="100%"
                maxWidth="{FlexGlobals.topLevelApplication.width}"
                contentBackgroundColor.hovered="0xff0018"
                focusColor="0xff00ff"
                contentBackgroundAlpha="0.8">

        <s:states>
            <s:State name="normal"/>
            <s:State name="hovered"/>
            <s:State name="selected"/>
        </s:states>

The styles in the above code have no effect.

I also tried adding contentBackgroundColor to the List element but that only changed the background of the list and not the items.

css doesn't work either:

s|ItemRenderer{
    backgroundColor:#2e2e2e;
}

How can I change background color of the item renderer?

I know I can skin it but that would be an overkill for a simple color change and I am positive that I had it working couple of years back without skinning.

Answer 1

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>