10
Feb
08

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

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.


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


  1. 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. 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. 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. 4 peterd Feb 18th, 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

  5. 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. 6 John K. Mak Feb 21st, 2008 at 5:11 pm

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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".