Setting the fill colors on a CheckBox control in Flex

The following example shows how you can set the check box fill colors on a Flex CheckBox control by setting the fillColors style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_fillColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:CheckBox id="checkBox"
            label="CheckBox"
            fillColors="[red,haloOrange,yellow,haloGreen]"
            themeColor="black" />

</mx:Application>

You can also set the fillColors 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/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_fillColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            fillColors: red,haloOrange,yellow,haloGreen;
            themeColor: black;
        }
    </mx:Style>

    <mx:CheckBox id="checkBox"
            label="CheckBox" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/26/setting-the-fill-colors-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_fillColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                checkBox.setStyle("fillColors",
                        ["red", "haloOrange", "yellow", "haloGreen"]);
                checkBox.setStyle("themeColor", "black");
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="CheckBox"
            initialize="init();" />

</mx:Application>

Tagged as: fillColors, themeColor