Image as Label with Checkbox in Flex

I want to use an ima开发者_开发技巧ge in my checkbox as label, anybody know how ?

When I tried doing the same thing with a RadioButton a while back, I ended up having to create my own component. This is what I did:

IconRadioButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
    <![CDATA[
        import mx.controls.RadioButtonGroup;

        [Bindable]
        public var imgLabel:Class;

        [Bindable]
        public var groupName:RadioButtonGroup;

        [Bindable]
        public var selected:Boolean;

        [Bindable]
        public var value:String;

        ]]>
    </mx:Script>
    <mx:RadioButton 
        id="radioBtn"
        group="{groupName}"
        groupName="{groupName}"
        selected="{selected}"
        label=""
        value="{value}"
        visible="{visible}"
        includeInLayout="{includeInLayout}" />
    <mx:Image source="{imgLabel}" click="{radioBtn.selected = true}" />
</mx:HBox>

Then you could use it like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:controls="com.example.controls.*">
<controls:IconRadioButton 
    groupName="{group}" 
    imgLabel="{AssetsFactory.getInstance().iconCCVisa}" 
    value="{CreditCardTypes.VISA}" />
...

Hope that maybe gets you started or gives you some ideas.

To use image as label, use the following code.

    <mx:HBox width="100%">
        <mx:RadioButton groupName="Yield"/>
        <mx:Image source="@Embed('/scripts/btn_highest.png')"/>
    </mx:HBox>