Removing the border skin on a List control in Flex

The following example shows how you can remove the border skin on a Flex List control by setting the borderSkin style to null using MXML, CSS, and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            borderSkin="{null}"
            width="100" />

</mx:Application>

You can also set the borderSkin style in an external .CSS file or <Style> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        List {
            borderSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            width="100" />

</mx:Application>

Or, you can set the borderSkin style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                list.setStyle("borderSkin", null);
            }
        ]]>
    </mx:Script>

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            width="100"
            initialize="init();" />

</mx:Application>

Tagged as: borderSkin