Changing the arrow button skins on a Flex container’s scroll bars at Flex Examples

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.

View MXML

<?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.

<mx:Style> Box { verticalScrollBarStyleName: myVScrollBarStyleName; horizontalScrollBarStyleName: myHScrollBarStyleName; } .myVScrollBarStyleName { downArrowSkin: ClassReference(null); upArrowSkin: ClassReference(null); } .myHScrollBarStyleName { downArrowSkin: ClassReference(null); upArrowSkin: ClassReference(null); } </mx:Style>

February 2008
M	T	W	T	F	S	S
« Jan		Mar »
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29

February 2008

« Jan

Mar »

6 Responses to “Changing the arrow button skins on a Flex container's scroll bars”

Feed for this Entry View blog reactions

1 Andy Matthews Feb 13th, 2008 at 9:36 am

I don’t understand how the knows that it should use the “Container” style. Can you elaborate please?
2 peterd Feb 13th, 2008 at 8:50 pm

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
3 Eric Feb 18th, 2008 at 3:53 am

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

4 peterd Feb 18th, 2008 at 8:14 am

Eric,

Good question! Instead of using Embed() to embed an image try using ClassReference(null):

If I get time later today I’ll try and turn that into a new entry.

Thanks,
Peter

5 John K. Feb 21st, 2008 at 10:40 am

Nice code Peterd. I just have a question for you. Is there a way to edit the width of the scrollbar?
6 John K. Mak Feb 21st, 2008 at 5:11 pm

Hey Peterd. Never mind, I was able to figure it out by myself.