The following example shows how you can toggle a drop shadow on a Flex List control by setting the dropShadowEnabled
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> <mx:Object label="Ten" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="dropShadowEnabled:"> <mx:CheckBox id="checkBox" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:List id="list" dataProvider="{arr}" dropShadowEnabled="{checkBox.selected}" width="100" /> </mx:Application>
View source is enabled in the following example.
You can also set the dropShadowEnabled
style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> List { dropShadowEnabled: true; } </mx:Style> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> <mx:Object label="Ten" /> </mx:Array> <mx:List id="list" dataProvider="{arr}" width="100" /> </mx:Application>
Or, you can set the dropShadowEnabled
style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { list.setStyle("dropShadowEnabled", checkBox.selected); } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> <mx:Object label="Ten" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="dropShadowEnabled:"> <mx:CheckBox id="checkBox" change="checkBox_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:List id="list" dataProvider="{arr}" width="100" /> </mx:Application>
Thanks for all your postings. I look at your site all the time and have learned a lot.
thanks for your codes buddy they are really helpful