Enabling sticky highlighting on a CheckBox control in Flex

The following example shows how you can enable sticky highlighting on a Flex CheckBox control by setting the stickyHighlighting property.

According to the documentation for the stickyHighlighting property:

If false, the CheckBox displays its down skin when the user presses it but changes to its over skin when the user drags the mouse off of it. If true, the CheckBox displays its down skin when the user presses it, and continues to display this skin when the user drags the mouse off of it.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/14/enabling-sticky-highlighting-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_stickyHighlighting_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="use stickyHighlighting:"
                labelPlacement="left" />
    </mx:ApplicationControlBar>

    <mx:CheckBox id="checkBox2"
            label="CheckBox"
            stickyHighlighting="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

You can also set the stickyHighlighting property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/14/enabling-sticky-highlighting-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_stickyHighlighting_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                checkBox2.stickyHighlighting = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="use stickyHighlighting:"
                labelPlacement="left"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

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

</mx:Application>

Tagged as: stickyHighlighting