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.

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

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

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

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

  4. Peter,

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

    Regards,
    Chandra Kumar

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

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

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

    Thanks

  7. please help me!! I need to add child to BOX, child is type tabNavigator, my code is:

    for each(xmlTerminal in data.terminal)
    {

    var tabDetalle:TabNavigator = new TabNavigator();
    detalle.addChild(tabDetalle);
    }

    detalle is id of my BOX.

    detail is the id of the box, by adding it creates separate tabs.

    please help me!!

Comments are closed.