Question

I have a VGRoup which automatically gets a scrollbar if the content gets too long.

I would like to skin the scrollbar (make it wider). how can i do that?

<s:Panel title="Replay" width="95%" height="860" top="920" horizontalCenter="0">
    <s:VGroup id="vgroup" left="10" right="10" top="10" bottom="10">
        <s:List id="list" height="100%" width="100%" itemRenderer="ListRenderer" />         
    </s:VGroup>
</s:Panel>

Answer 1

First you should know that it’s not the VGroup that gets a scrollbar, it’s the List. Groups are layout components with no visual elements whatsoever. (Also the VGroup is redundant in the code you show, but I guess you may have removed some irrelevant code for the purpose of this question.)

Now for the skinning: you do this by creating your own version of the Spark VScrollBarSkin. If you use FlashBuilder, right-click on your project (or a package where you want to create the skin); click ‘New > MXML Skin’; in the wizard fill in spark.components.VScrollBar as host component and have it create a copy of spark.skins.spark.VScrollBarSkin.

In the class you’ve just created, you see four Buttons, each with their own skin. One is the ‘scroll up’ button, another is the ‘scroll down’ button, the third is the track (the background) which is also clickable, and the last is the thumb that you can drag.

You can now create a custom skin for each of these Buttons just as you did with VScrollBarskin, but since you only want to adjust the width, that may not be necessary. It may suffice to just set an explicit width on each of these Buttons.

Now to apply your skin instead of the default one just put this in your stylesheet:

@namespace s "library://ns.adobe.com/flex/spark";

s|VScrollBar {
    skinClass: ClassReference("my.skins.VScrollBarSkin")
}

Or use a more specific selector if you want it applied only to List scrollbars for instance:

s|List s|VScrollBar { ... }