Comments on: Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4

By: skawian

skawian — Thu, 21 Jul 2011 14:41:45 +0000

use horizontalScrollPolicy=”off”

By: Jelbee

Jelbee — Mon, 18 Apr 2011 20:50:27 +0000

how to remove the horizontal bar? I wanted to show only the vertical scrollbar.

By: Peter deHaan

Peter deHaan — Sun, 08 Nov 2009 20:17:13 +0000

Or, if you’re doing this in MXML, I’d create a custom Scroller skin and just set the skinClass style on the VScrollBar and HScrollBar controls:

"1.0" encoding="utf-8"?>
 name="CustomScrollerSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    >
        [CDATA[
            [HostComponent("spark.components.Scroller")]
        ]]>
    >
 
    >
        [CDATA[
            override public function beginHighlightBitmapCapture():void {
                super.beginHighlightBitmapCapture();
                graphics.beginFill(0);
                graphics.drawRect(0, 0, width, height);
                graphics.endFill();
            }
 
            override public function endHighlightBitmapCapture():void {
                super.endHighlightBitmapCapture();
                graphics.clear();
            }
        ]]>
    >
 
    
     id="verticalScrollBar"
            skinClass="skins.CustomVScrollBarSkin"
            visible="false" />
 
    
     id="horizontalScrollBar"
            skinClass="skins.CustomHScrollBarSkin"
            visible="false" />
 
>

Peter

By: Peter deHaan

Peter deHaan — Sun, 08 Nov 2009 19:50:57 +0000

@vlad,

To set the skin class using ActionScript, try this:

list.scroller.horizontalScrollBar.setStyle("skinClass", TrackThumbOnlyHSBSkin);

Peter

By: vlad

vlad — Sun, 08 Nov 2009 18:50:45 +0000

Hello! Could you help me.
I’m trying ty make a skin for Scroller.
And I don’t understand how correctly link from Scroller skin to VScrollBar skin or HScrollBar skin?
I don’t understand how to use “verticalScrollBar” property of scroller or it skin.
There are no good examples or articles for that.
I found how to style VScrollBar with CSS ans ClassReferance and how to make custom skin with Catalist for VScrollBar.
But how exactly link VScrollBar skin to Scroller skin?

By: Peter deHaan

Peter deHaan — Thu, 05 Nov 2009 15:22:54 +0000

Clarified and expanded at "Applying styles to specific Spark List controls in Flex 4". Peter

By: Peter deHaan

Peter deHaan — Thu, 05 Nov 2009 15:08:50 +0000

@Steve Lombardi,

Good question. There are a couple of ways to selectively apply styles based on the styleName property or the component’s id property.

(1) Apply the styles to ALL instances of s|List:

s|List s|HScrollBar {
    skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
}

(2) Apply the styles to all instances of s|List with a styleName property of “listHSBStyles”:

s|List.listHSBStyles s|HScrollBar {
    skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
}

(3) Apply the styles to all instances of s|List with an id property of “list1″:

s|List#list1 s|HScrollBar {
    skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
}

So, depending on whether “choiceLists” is a styleName property (you’d want to use solution #2) or an id property (you’d want to use solution #3), you have a couple options.

Peter

By: Steve Lombardi

Steve Lombardi — Thu, 05 Nov 2009 14:27:27 +0000

How can I target a specific list with that CSS instead of all lists?

I tried 2. I can’t target a specific List:
.choiceList s|HScrollBar {
skinClass: ClassReference(“skins.FoodHScrollbar”);
}
Does not work