Flex: Backgroundimage not showing in list - apache-flex

Question

I have a custom component that has an background image.
But when you generate this component by an ItemRenderer in a List, the background image is gone.
What am I doing wrong?
Here is an image. The first element is not generated in a list and has a background image. The other three are part of a List and have no background image.
Here is the code of the MXML of the List
<mx:VBox>
<solutionItems:displaySolutionItem /> <!-- This element shows the background image -->
<mx:List selectable="false"
useRollOver="false"
id="listControllers"
backgroundAlpha="1"
dataProvider="{controllers}" >
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
And here is the code of <solutionItems:displaySolutionItem />
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="{itemBackGround}"
backgroundSize="100%">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
private var itemBackGround:Class;
]]>
</mx:Script>
<mx:VBox
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />
<mx:HBox>
<mx:Image width="67" height="50" id="loader1" source="#Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/>
<mx:HBox>
<mx:VBox>
<mx:Label text="Cube size" styleName="formLabel" height="12" />
<mx:Label text="Cube config" styleName="formLabel" height="12" />
<mx:Label text="Display res" styleName="formLabel" height="12" />
<mx:Label text="DPI" styleName="formLabel" height="12" />
<mx:Label text="Price" styleName="formLabel" height="12" />
</mx:VBox>
<mx:Box>
<mx:Label text="50''" height="12" />
<mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
<mx:Label text="WXGA (1360x768)" height="12" />
<mx:Label text="72 dpi" height="12" />
<mx:Label text="€ 101.000,00" height="12" />
</mx:Box>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
It is probably something small, but I can not find it.

Answer 1

The following will get around the problem:
Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer
Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:
<mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
If your find a better way, sure update your question to let us know,
Brian

Answer 2

Have you tried setting the alpha, or backgroundAlpha properties on your List or perhaps in the itemRenderer?
I'm guessing that the List is either drawing something on top of the background, or preventing the background from being drawn. You'd have to step through code to know for sure, though.

Answer 3

I didn't try this, but look like
component is not creating multiple instance/copies of image for each renderer
possible solution may be is, load image in any Singleton/Constant Class like in Model and NOT in component/list and use Model's attribute reference in component/list i.e. one copy for all renderer.
Hopes this works