改变NumericStepper控件上下箭头的外观.

NumericStepper 控件的 downArrowSkin 和 upArrowSkin 样式学习。通过5种方式实现。
示例：

第一种方式
代码：

<? 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 >

第2种方式：在<style>标签中设置

<? 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 >

第3种方式，通过绑定[Embed]

<? 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 >

第4种方式：使用绑定和AS

<? 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 >

第5种方式：通过自定义组件
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);
        }
    }
}

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 >

来自： http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/

转载于:https://www.cnblogs.com/xxcainiao/archive/2008/05/21/1204122.html