How to fix the height of the scroll thumb in Flex If you decide to use a VScrollBar or HScrollBar directly, you'll notice that the scroll thumb is always tiny, no matter the amount of scrolling that is available. The root of the problem is that the ScrollThumb class has an explicitMinHeight of 10, but the way to change that is not very straightforward. Here's the easiest solution I found:

import mx.controls.VScrollBar;
import mx.core.mx_internal;

public class MyVScrollBar extends mx.controls.VScrollBar
{
    public function MyVScrollBar()
    {
        super();
    }

    public override function set pageSize( value:Number ):void {
        super.pageSize = value;
        updateThumbHeight();
    }

    [...]

    public override function setScrollProperties( 
            pageSize:Number,
            minScrollPosition:Number,
            maxScrollPosition:Number,
            pageScrollSize:Number = 0 
    ):void {
        super.setScrollProperties( 
            pageSize, 
            minScrollPosition, 
            maxScrollPosition, 
            pageScrollSize 
        );
        updateThumbHeight();
    }

    private function updateThumbHeight():void {
        if ( mx_internal::scrollThumb ) {
            mx_internal::scrollThumb.explicitMinHeight = 40;
        }
    }
}

So, we're extending the VScrollBar, and using the weird mx_internal namespace to access its scrollThumb property, which is an instance of ScrollThumb class. Now it's just a matter of setting explicitMinHeight whenever one of the scroll properties is changed. I only show pageSize, but the other properties in setScrollProperties() should also be overridden.

This gives you a larger thumb, which is nice, but we can do better. A dynamically-sized thumb is simply as big as the scrollbar itself minus the scrollable ammount, and if we add a simple Math.max() to prevent the thumb from getting too tiny (again), we're set! Change the last function to this:

    private function updateThumbHeight():void {
        if ( mx_internal::scrollThumb ) {
            mx_internal::scrollThumb.explicitMinHeight = 
                Math.max( height - maxScrollPosition, 40 );
        }
    }

It's important to note that explicitMinHeight does a lot of work for us, adjusting the rest of the scroll properties as necessary. Other height-related properties do not work as well.

The original solution was taken from Nathan's answer to a JustLogged question, but sadly it's not considered the "accepted" answer; you have to see the "other" answers to find Nathan's.

About mx_internal, it's actually a member modifier, like private or public. All the properties you see in the Flex debugger with a yellow rhombus are mx_internal properties. For a more in-depth look, check out When and how to use mx_internal in Flex at Code Of Doom.

Etiquetas: actionscript, howto

  ¶ 10:03 a.m.