Question

This is what I’ve done so far.

       <!-- fill -->
        <!--- Defines the appearance of drop-down list's background fill. -->
        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>
            <!---  
                The color of the drop down's background fill.
                The default color is 0xFFFFFF.
            -->
                <s:SolidColor id="bgFill" color="#DB9E36"/>
            </s:fill>
        </s:Rect>

If you look closely you’ll see that I’ve changed the default value for the bgFill color. However, when I run my application, the background color for the dropdownlist is still the default white.

Am I doing anything wrong here?

Thanks in advance.

Answer 1

Easy way to do this is by using the contentBackgroundColor style. Something like this:

<s:DropDownList contentBackgroundColor="0xDB9E36" >
    <s:dataProvider>
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>           
    </s:dataProvider>
</s:DropDownList>

Some more details..

When creating a custom skin; there is a list of properties called contentFill; defined like this:

 static private const contentFill:Array = ["bgFill"];

You’ll notice the value listed here is the bgFill; the same background whose color you are trying to change.. And it can be retrieved publicly by using the contentItem property:

override public function get contentItems():Array {return contentFill};

The SparkSkin class [which all MXML Skins extend by default] access this value inside of updateDisplayList. Every property in the contentItems array has it’s background color specificed using the contentBackgroundColor and it’s alpha specified using contentBackgroundAlpha.

It is a bit misleading that a value is explicitly defined in the MXML then [potentially] overwritten in ActionScript.