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.

Sunil D. · Accepted Answer · 2013-03-06T00:02:16.200

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>

Thanks again, worked perfectly. I may re-factor in the future, would you say it's a bad idea to forgo List/ItemRenderer and just use custom component based on group with a skin and add/remove it manually? (I will only have 10 items at a time). — DominicM, Mar 06 '13 at 11:42
The list/renderer solves a lot of common problems (mouse/keyboard interactions, selection, and so on). If you don't need them, you could make something a little more lightweight with a custom component, but it could be more work. Also, consider using the DataGroup instead of Group, the List extends DataGroup which has a lot of useful functionality, but that may even be too much for only 10 items. The biggest advantage to List/DataGroup is the object pooling it gives you (when there are more items than can fit on screen). — Sunil D., Mar 06 '13 at 14:39
I disabled virtualLaybout(it kept updating with wrong images when scrolled) so object pooling isn't an advantage anyways :) Thanks. — DominicM, Mar 06 '13 at 15:31
@DominicM that's a [common problem](http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html) w/item renderer recycling, but the solutions are pretty simple. If you have a lot of elements in the list object pooling can be very advantageous. — Sunil D., Mar 06 '13 at 19:36

ItemRenderer change background color

1 Answers1