Toggling the drop shadow on the ComboBox control in Flex

The following example shows how you can toggle the drop shadow on the Flex ComboBox control by setting the dropShadowEnabled style on the ComboBox control’s dropdown menu.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/09/toggling-the-drop-shadow-on-the-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .shadowDisabled {
            dropShadowEnabled: false;
        }

        .shadowEnabled {
            dropShadowEnabled: true;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var value:String = "shadowEnabled";
                if (!checkBox.selected) {
                    value = "shadowDisabled;"
                }
                comboBox.setStyle("dropdownStyleName", value);
                comboBox.validateNow();
                comboBox.open();
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="dropShadowEnabled:"
                labelPlacement="left"
                selected="true"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            openDuration="0"
            closeDuration="0" />

</mx:Application>