Changing the up arrow skin and down arrow skin on a NumericStepper control in Flex

The following example shows how you can change the down arrow skin and up arrow skin in a Flex NumericStepper control by setting the downArrowSkin and upArrowSkin styles using MXML, CSS, and ActionScript.

Full code after the jump.

The following example shows how you can embed the arrow skins using an inline @Embed() in MXML:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from the NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="@Embed('assets/bullet_arrow_down.png')"
            upArrowSkin="@Embed('assets/bullet_arrow_up.png')" />

</mx:Application>

View source is enabled in the following example.

The following example shows how you can embed the arrow skins using Embed() in an <mx:Style /> block:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            downArrowSkin: Embed("assets/bullet_arrow_down.png");
            upArrowSkin: Embed("assets/bullet_arrow_up.png");
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

The following example shows how you can embed the arrow skins using the [Embed] metadata and bindings in your MXML:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Bindable]
            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            downArrowSkin="{downArrowIcon}"
            upArrowSkin="{upArrowIcon}" />

</mx:Application>

The following example shows how you can embed the arrow skins using the [Embed] metadata and ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Embed("assets/bullet_arrow_down.png")]
            private var downArrowIcon:Class;

            [Embed("assets/bullet_arrow_up.png")]
            private var upArrowIcon:Class;

            private function init():void {
                numericStepper.setStyle("downArrowSkin", downArrowIcon);
                numericStepper.setStyle("upArrowSkin", upArrowIcon);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper" initialize="init();" />

</mx:Application>

The following example shows how you can embed the arrow skins by extending the NumericStepper control using ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Click here to remove focus from NumericStepper control" />
    </mx:ApplicationControlBar>

    <comps:MyNumericStepper id="numericStepper" />

</mx:Application>

comps/MyNumericStepper.as

/**
 * http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.controls.NumericStepper;

    public class MyNumericStepper extends NumericStepper {
        [Embed("assets/bullet_arrow_down.png")]
        public var downArrowIcon:Class;

        [Embed("assets/bullet_arrow_up.png")]
        public var upArrowIcon:Class;

        public function MyNumericStepper() {
            super();
            init();
        }

        private function init():void {
            setStyle("downArrowSkin", downArrowIcon);
            setStyle("upArrowSkin", upArrowIcon);
        }
    }
}