Adding icons to the Flex LinkBar control

The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Button"
                ico="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                ico="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                ico="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                ico="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            iconField="ico" />

</mx:Application>

View source is enabled in the following example.

If you are using a ViewStack as a data provider for the LinkBar control, you could use the following code instead:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:LinkBar id="linkBar"
            dataProvider="{viewStack}" />

    <mx:ViewStack id="viewStack" width="{linkBar.width}">
        <mx:VBox label="Button"
                icon="@Embed('assets/Button.png')">
            <mx:Label text="Button..." />
        </mx:VBox>
        <mx:VBox label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')">
            <mx:Label text="ButtonBar..." />
        </mx:VBox>
        <mx:VBox label="CheckBox"
                icon="@Embed('assets/CheckBox.png')">
            <mx:Label text="CheckBox..." />
        </mx:VBox>
        <mx:VBox label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')">
            <mx:Label text="ColorPicker..." />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

Tagged as: iconField