Flex 界面滚动条样式的设置

该列子对滚动条箭头的样式设置，滑块没有测试过

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.events.ScrollEvent;

// Event handler function to display the scroll location

// as you move the scroll thumb.

private function myScroll(event:ScrollEvent):void

{

showPosition.text = "VScrollBar properties summary:" + '\n' +

"------------------------------------" + '\n' +

"Current scroll position: " + event.currentTarget.scrollPosition + '\n' +

"The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +

"The minimum scroll position: " + event.currentTarget.minScrollPosition ;

}

]]>

</fx:Script>

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

.VScrollBarStyle {

downArrowUpSkin: Embed(source="searchBg_content.png");

downArrowOverSkin: Embed(source="searchBg_content.png");

downArrowDownSkin: Embed(source="searchBg_content.png");

upArrowUpSkin: Embed(source="searchBg_content.png");

upArrowOverSkin: Embed(source="searchBg_content.png");

upArrowDownSkin: Embed(source="searchBg_content.png");

thumbDownSkin:

Embed(source="searchBg_content.png",

scaleGridLeft="7", scaleGridTop="5",

scaleGridRight="8", scaleGridBottom="7");

thumbUpSkin:

Embed(source="searchBg_content.png",

scaleGridLeft="7", scaleGridTop="5",

scaleGridRight="8", scaleGridBottom="7");

thumbOverSkin:

Embed(source="searchBg_content.png",

scaleGridLeft="7", scaleGridTop="5",

scaleGridRight="8", scaleGridBottom="7");

trackSkin:

Embed(source="searchBg_content.png",

scaleGridLeft="7", scaleGridTop="4",

scaleGridRight="8", scaleGridBottom="6" );

}

</fx:Style>

<mx:Panel id="panel" title="VScrollBar Control Example" height="75%" width="75%"

paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Label width="100%" color="blue"

text="Click on the scroll bar to view its properties."/>

<mx:VScrollBar id="bar" height="100%" styleName="VScrollBarStyle"

minScrollPosition="0" maxScrollPosition="{panel.width - 20}"

lineScrollSize="50" pageScrollSize="100"

repeatDelay="1000" repeatInterval="500"

scroll="myScroll(event);"/>

<mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>

</mx:Panel>

</s:Application>