NumericStepper 控件的downArrowSkin?和 upArrowSkin 樣式學(xué)習(xí)。通過5種方式實(shí)現(xiàn)。
示例：

第一種方式
代碼：
<?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>標(biāo)簽中設(shè)置
<?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>

來(lái)自：http://blog.flexexamples.com/2008/05/20/changing-the-up-arrow-skin-and-down-arrow-skin-on-a-numericstepper-control-in-flex/

轉(zhuǎn)載于:https://www.cnblogs.com/xxcainiao/archive/2008/05/21/1204122.html

總結(jié)

以上是生活随笔為你收集整理的改变NumericStepper控件上下箭头的外观.的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。