Flex – ItemRenderer Change Background Colors

I have an item renderer, I want to change the default color:

 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">

 
 
 
 
 

The style in the above code is invalid.

I also tried adding contentBackgroundColor to the List element, but only changed the background of the list instead of the items.< /p>

css does not work either:

s|ItemRenderer{
 backgroundColor:#2e2e2e;
}

How to change the background color of the item renderer?

I know I can peel, but this is an overkill for a simple color change, and I’m pretty sure I didn’t have skin a few years ago.

It was always a bit confusing at first. In my opinion, the style name was not chosen properly. The bloody details are in the drawBackground() method of the ItemRenderer class.

You can set the contentBackgroundColor style on the List component itself, it has no effect on the renderer. It will fill the background color of the list, but usually the renderer occupies all the area, so you will never see it. For example, if your list is very High but only 1 or 2 items (so the space at the bottom is not covered by the renderer), it will be visible.

Set the background color of the renderer:

instead of using contentBackgroundColor, use the alernatingItemColors style. This style requires a set of values. If you only want one color, just put an element in the array:

alternatingItemColors="[ #c0c0c0]"

By looking at the code in drawBackground(), if you want to set the alpha on the background color, you must draw the background yourself (see below).

You may want to set Other background related styles:

> downColor
> selectionColor
> rollOverColor

To draw your own background color:

Set the autoDrawBackground property Is false. This means that you must now draw your own colors for all the various renderer states (“normal”, “selected”, “hovering”, etc.). Fortunately, you can use your own colors in the renderer The same state syntax used on the background object selected above (“Rect” etc.).