Geek Answers Handbook

ItemRenderer changes the background color

I have an item renderer that I want to change by default:

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

Styles in the above code have no effect.

I also tried adding a contentBackgroundColor to the List element, but this only changed the background of the list, not the elements.

css doesn't work either:

 s|ItemRenderer{ backgroundColor:#2e2e2e; }

How to change background color of item renderer?

I know that I can hide it, but it will be superfluous for a simple color change, and I'm sure I had a couple of years ago without skinning.

+4
source share
1 answer

This is always a little confusing. In my opinion, style names are poorly selected. The gory details are all in the drawBackground() method of the drawBackground() class.

The contentBackgroundColor style is what you can set in the List component itself, it does not affect the rendering. It will fill the background color of the list, but usually visualizers occupy this entire area, so you will never see it. It would be seen, for example, if your list is high, but has only 1 or 2 elements (thus, the space below is not covered by the renderer).

To set the background color of the renderer:

Instead of using contentBackgroundColor , use the contentBackgroundColor style. This style expects an array of values. If you need only one color, just put one element in an array:

 alternatingItemColors="[#c0c0c0]"

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

Other background styles you might want to set:

  • downColor
  • selectionColor
  • rollOverColor

To draw your own background colors:

Set the autoDrawBackground property to false. This means that now you have to draw your own colors for all states of the visualizer ("normal", "selected", "hovering", etc.). Fortunately, you can do this inside the renderer with the same state syntax as you used above on the background object of your choice (`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>
+8
source

More articles:


All Articles