Customize the flex scroll bar slider Style

In Flex, we can use the downarrowskin, uparrowskin, trackskin, and thumbskin methods to set the scroll bar style ..
However, due to the design relationship ..
The thumbskin of the scroll bar is often set to a "point" or a "Block "..
This block is fixed in size. Unlike the built-in flex scroll bar, it will change with the height of the rolling area ..
If thumbskin is directly set, the slider will be dropped and deformed ~ Very ugly ..
At this time, we can use the setscrollproperties method in verticalscrollbar to adjust the slider height ..

1. Public Function setscrollproperties (pagesize: Number, minscrollposition: Number, maxscrollposition: Number, pagescrollsize: Number = 0): void

The Code is as follows:
Custom mytextarea (to call the verticalscrollbar of protected)

View Source Code
Print
About this plug-in
01.
package


02.
{



03.
    
import
flash.events.Event;


04.
     
 

05.
    
import
mx.controls.TextArea;


06.
    
import
mx.events.FlexEvent;


07.
 
 

08.
    
public
class

MyTextArea
extends
TextArea


09.
    
{


10.
        
public
function

MyTextArea()


11.
        
{


12.
            
super
();



13.
        
}


14.
        
// Call setscrollproperties every time you refresh the scroll bar and set pagesize to 0



15.
        
override
protected
function
setScrollBarProperties(totalColumns:
int
, visibleColumns:
int
, totalRows:
int
, visibleRows:
int
):
void
 

16.
        
{


17.
            
super
.setScrollBarProperties(totalColumns,visibleColumns,totalRows,visibleRows);



18.
            
if
(verticalScrollBar)verticalScrollBar.setScrollProperties(
0
,verticalScrollBar.minScrollPosition,verticalScrollBar.maxScrollPosition,
0
);


19.
        
}


20.
    
}


21.
}

Master mxml

View Source Code
Print
About this plug-in
01.
<?xml
version=
"1.0"
encoding=
"utf-8"
?>


02.
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml
"

layout=
"absolute"
applicationComplete=
"init()"
xmlns:local=
"*"
width=
"500"
height=
"400"
fontSize=
"12"
>



03.
    
<mx:Style>


04.
        
.myTextArea


05.
        
{


06.
            
downArrowSkin: Embed(source=
"down.png"
);


07.
            
upArrowSkin: Embed(source=
"up.png"
);


08.
            
trackSkin: Embed(source=
"track.png"
,scaleGridTop=
"20"
,scaleGridLeft=
"7"
,scaleGridRight=
"9"
,scaleGridBottom=
"80"
);


09.
            
thumbSkin: Embed(source=
"thumb.png"
);


10.
        
}


11.
    
</mx:Style>


12.
    
<mx:Script>


13.
        
<![CDATA[


14.
            
[Bindable]


15.
            
private
var

content:
String
=
""
;



16.
            
private
function
init():
void


17.
            
{


18.
                
for
(
var
i:
uint
=
0
;i<
50
;i++)content+=
"/N l4cd. Net simple work/N"
;



19.
            
}


20.
        
]]>


21.
    
</mx:Script>


22.
    
<local:MyTextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
width=
"235"
x=
"10"
height=
"352"
y=
"38"
/>



23.
    
<mx:TextArea text=
"{content}"
verticalScrollBarStyleName=
"myTextArea"
verticalScrollPolicy=
"on"
borderStyle=
"none"
borderThickness=
"1"
height=
"352"
y=
"38"
width=
"235"
x=
"255"
/>



24.
    
<mx:Label x=
"10"
y=
"10"
text=
"Custom textarea"
/>



25.
    
<mx:Label x=
"255"
y=
"10"
text=
"Textarea by default"
/>



26.
</mx:Application>

Link: http://l4cd.net/blog/post-old-141.html