改变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/