The following example shows how you can change the up arrow and down arrow skins on a horizontal/vertical scroll bar in a Flex container by setting the horizontalScrollBarStyleName, verticalScrollBarStyleName, downArrowSkin, and upArrowSkin styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/10/changing-the-arrow-button-skins-on-a-flex-containers-scroll-bars/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Container {
verticalScrollBarStyleName: myVScrollBarStyleName;
horizontalScrollBarStyleName: myHScrollBarStyleName;
}
.myVScrollBarStyleName {
downArrowSkin: Embed("assets/bullet_add.png");
upArrowSkin: Embed("assets/bullet_delete.png");
}
.myHScrollBarStyleName {
downArrowSkin: Embed("assets/bullet_add.png");
upArrowSkin: Embed("assets/bullet_delete.png");
}
</mx:Style>
<mx:String id="lorem" source="lorem.txt" />
<mx:Box clipContent="true"
backgroundColor="haloSilver"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"
width="320"
height="240">
<mx:Text text="{lorem}" width="550" />
</mx:Box>
</mx:Application>
View source is enabled in the following example.
{ 11 comments… read them below or add one }
I don’t understand how the knows that it should use the “Container” style. Can you elaborate please?
Andy Matthews,
The Box class inherits from the Container class. Sorry, I should have used something a bit more clear in the <mx:Style /> block.
Peter
Good stuff peterd, i was wondering if there is a way to remove the arrow buttons completely, i just want a nice clean scroll bar with no up/down buttons. Thanks
Eric
Eric,
Good question! Instead of using
Embed()to embed an image try usingClassReference(null):<mx:Style> Box { verticalScrollBarStyleName: myVScrollBarStyleName; horizontalScrollBarStyleName: myHScrollBarStyleName; } .myVScrollBarStyleName { downArrowSkin: ClassReference(null); upArrowSkin: ClassReference(null); } .myHScrollBarStyleName { downArrowSkin: ClassReference(null); upArrowSkin: ClassReference(null); } </mx:Style>If I get time later today I’ll try and turn that into a new entry.
Thanks,
Peter
Nice code Peterd. I just have a question for you. Is there a way to edit the width of the scrollbar?
Hey Peterd. Never mind, I was able to figure it out by myself.
Peter,
Is it possible to switch off the Scroll bar(s) and implement the scrolling in two buttons outside the container?
Regards,
Chandra Kumar
Is it possible to replace the trackbar 4 a image?
My horizontal scroll bar is kind of wierd. It doesn’t look like the scroll bar in this picture. Maybe it is inheriting from a global css style sheet in the application somewhere. How do I override that behaviour in the horizontalList?
Java Developer lost in Flex
Veena Pandit,
Are you using the Flex 3 SDK or the beta Flex 4 SDK?
If you’re using the Flex 4 SDK, it will use a slightly different theme and many of these posts may not look the same (or work at all).
Peter
Nice work, but if wewant to make a skin in flash through flex extension, hot it is applied in the application.
Thanks