How to change a DropDownList's BackGround colour In FLEX?

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.

What do you want to change? The background from the prompt area? Or the down arrow Button? Or the actual PopUp? Without seeing the full skin; it's tough to tell what you've actually changed. — JeffryHouser, Sep 17 '11 at 21:21
That's the only bit I've changed so far. I would like to change the whole PopUp Background... but this `s:Rect` is within the PopUp, so shouldn't what I've done work? — Felipe, Sep 17 '11 at 21:24
That code snippet is from the *default* DropDownListSkin file, the only thing I've changed is that `color` value, nothing else. I'd expected to see a good ole dropDownList, the only difference would be that the popUp backgroundColor is orange rather than the default white...... — Felipe, Sep 17 '11 at 21:36
I've just noticed that, if you want to change a popUp's width you have to `popUpWidthMatchesAnchorWidth="false"`... perhaps there's something analogous I have to do to be able to change the popUp's background colour?? — Felipe, Sep 17 '11 at 22:29

score 5 · Accepted Answer · answered Sep 18 '11 at 00:08

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.

How to change a DropDownList's BackGround colour In FLEX?

1 Answers1