flex combobox arrow custom image

1
votes

In my Flex AIR application I have to customize the Combobox with custom arrow icon. I got the properties to change its color but didn't get any property to change the icon itself. After Googling I got some links of skinning the combobox but they were for FLASH CS4, but I am on Flex.

Not getting any solution. Please help.

Thanks in advance.

Here is the code:

<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
    ComboBox {
        up-skin :  Embed(source="Pulldown_def.png");
        down-skin : Embed(source="Pulldown_def.png");
        over-skin : Embed(source="Pulldown_def.png");       
    }
</mx:Style>
<mx:Array id="dp">
    <mx:Object label="test1" />
    <mx:Object label="test2" />
</mx:Array>
<mx:ComboBox id="cbx" x="51" y="43" dataProvider="{dp}" labelField="label" ></mx:ComboBox>

It is not working for me :( It applies the image over whole Combobox. I need to replace the arrow image. Am I doing anything wrong?

2
apache-flexactionscript-3skinningflex3

2 Answers

0
votes

You can create a custom skin and set the skin, upSkin, downSkin and overSkin style attributes of the ComboBox to that class. The default value is ComboBoxArrowSkin

0
votes

By default, the ComboBoxArrowSkin draws the ENTIRE ComboBox. There is no style attribute for the icon itself - you'll have to write your own skin. Read through ComboBox.as and ComboBoxArrowSkin.as and you'll see what's going on there. It's ugly. I would consider deriving my own class from ComboBoxArrowSkin and tweaking the arrow drawing yourself. It happens at the end of updateDisplayList():

// Draw the triangle.
g.beginFill(arrowColor);
g.moveTo(w - 11.5, h / 2 + 3);
g.lineTo(w - 15, h / 2 - 2);
g.lineTo(w - 8, h / 2 - 2);
g.lineTo(w - 11.5, h / 2 + 3);
g.endFill();