Flex Examples

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.