Issues displaying the Background in VBox while using WindowShader

Question

I am using a WindowShader in my website. every thing is working fine. but for somereason i am unable to display any background for my "home_feeds" VBox. If i add components on it, i can see them. But they backgound is not working. Even if i remove every thing from the Canvas(with home_feeds) i still dont see any background. But if i remove the comments from my mx:List.. i can see the background.

my code is given below

    <mx:VBox right="35" paddingRight="10" verticalAlign="top" horizontalAlign="right">
    <containers:WindowShade id="shade" opened="false" openIcon="{null}" closeIcon="{null}" paddingTop="0" 
     headerLocation="bottom" visible="true">         
        <containers:headerRenderer>
            <mx:Component>                 
                <flexlib:CanvasButton width="100%" height="20" skin="mx.skins.ProgrammaticSkin">                     
                    <mx:Script>
                    <![CDATA[
                        import flexlib.containers.WindowShade;
                    ]]>
                    </mx:Script>
                    <mx:Box width="100%" horizontalAlign="center">
                        <degrafa:Surface width="80">    
                            <degrafa:GeometryGroup>                          
                              <geometry:EllipticalArc closureType="pie" 
                                  arc="180" startAngle="-180" width="80" height="35" y="-18">                                   
                                <geometry:fill>
                                    <paint:GradientFill angle="90">
                                        <paint:GradientStop color="#920000" />
                                        <paint:GradientStop color="#D31F1F" />
                                    </paint:GradientFill>
                                   </geometry:fill>
                              </geometry:EllipticalArc>

                                <geometry:Polygon>
                                    <geometry:data>40,5 35,13 45,13</geometry:data>
                                    <geometry:stroke>
                                        <paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
                                    </geometry:stroke>
                                    <geometry:fill>
                                        <paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
                                    </geometry:fill>
                                </geometry:Polygon>

                                <geometry:Polygon>
                                    <geometry:data>40,13 35,5 45,5</geometry:data>
                                    <geometry:stroke>
                                        <paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
                                    </geometry:stroke>
                                    <geometry:fill>
                                        <paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
                                    </geometry:fill>
                                </geometry:Polygon>

                            </degrafa:GeometryGroup> 
                        </degrafa:Surface>
                    </mx:Box>
                </flexlib:CanvasButton>
            </mx:Component>
        </containers:headerRenderer>         
        <mx:Canvas horizontalScrollPolicy="off" width="200" height="350" >          
            <!--mx:List id="home_feeds" height="100%" width="100%" itemRenderer="file_manager.list_item_template" doubleClickEnabled="true" /-->
            <mx:VBox id="home_feeds"
     width="100%"
    backgroundAlpha="0.1"
     left="10"
     right="10">
   </mx:VBox>
        </mx:Canvas>         
        <containers:filters>
            <mx:DropShadowFilter alpha=".3" angle="90" />
        </containers:filters>
    </containers:WindowShade>    
</mx:VBox>

Kindly let me know what am i doing wrong here.... And how can i fix it. I want to use the VBox there.

Regards Zeeshan

Answer 1

The size of a VBox without an explicit value for width would be zero if it doesn't have any children in it. Add some children (a Label for example) to see the background color. Increase background alpha from 0.1 to 0.5 or something to see it clearly.

If you mention explicit values for width and height (instead of percentages), you can see the background color even if it doesn't have any children.

set backgroundColor="#00ff00" (green) for the home_feeds VBox to differentiate VBox's background color from its parent's color.