The following example shows how you can set the border color on a Flex HorizontalList control by setting the borderColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HorizontalList id="hList" borderColor="{colorPicker.selectedColor}" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <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:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
You can also set the borderColor style in an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HorizontalList { borderColor: haloBlue; } </mx:Style> <mx:HorizontalList id="hList" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <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:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
Or, you can set the borderColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; protected function colorPicker_change(evt:ColorPickerEvent):void { hList.setStyle("borderColor", evt.color); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" change="colorPicker_change(event);"/> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HorizontalList id="hList" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <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:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
