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

by Peter deHaan on February 10, 2008

in Box

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.

{ 11 comments… read them below or add one }

1 Andy Matthews February 13, 2008 at 9:36 am

I don’t understand how the knows that it should use the “Container” style. Can you elaborate please?

Reply

2 peterd February 13, 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

Reply

3 Eric February 18, 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

Reply

4 peterd February 18, 2008 at 8:14 am

Eric,

Good question! Instead of using Embed() to embed an image try using ClassReference(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

Reply

5 John K. February 21, 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?

Reply

6 John K. Mak February 21, 2008 at 5:11 pm

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

Reply

7 Chandra Kumar March 9, 2009 at 11:10 pm

Peter,

Is it possible to switch off the Scroll bar(s) and implement the scrolling in two buttons outside the container?

Regards,
Chandra Kumar

Reply

8 martinz July 8, 2009 at 8:37 pm

Is it possible to replace the trackbar 4 a image?

Reply

9 Veena Pandit July 25, 2009 at 1:06 pm

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

Reply

10 Peter deHaan July 25, 2009 at 3:46 pm

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

Reply

11 Tahir Alvi-Pakistan September 9, 2009 at 9:55 pm

Nice work, but if wewant to make a skin in flash through flex extension, hot it is applied in the application.

Thanks

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: