Setting the track color of a Flex ProgressBar control

The following example shows you how you can set the track colors on a ProgressBar control in Flex by setting the trackColors style to an array of two values.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/setting-the-track-color-of-a-flex-progressbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            fontSize="48"
            barColor="haloBlue"
            trackColors="[white, haloSilver]"
            trackHeight="64"
            width="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

You can also set the ProgressBar control’s trackColors style in an external .CSS file or an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    ProgressBar {
        barColor: haloBlue;
        trackColors: white, haloSilver;
        trackHeight: 64;
    }
</mx:Style>

Or, you can set the trackColors style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function progressBar_initialize():void {
            progressBar.setProgress(76, 100);
            // Set styles...
            progressBar.setStyle("barColor", "haloBlue");
            progressBar.setStyle("trackColors", ["white", "haloSilver"]);
            progressBar.setStyle("trackHeight", 64);
        }
    ]]>
</mx:Script>

If you want the ProgressBar control’s track to have a solid fill, set both colors the trackColors style to the same value, as seen in the following snippet:

<mx:Style>
    ProgressBar {
        barColor: haloBlue;
        trackColors: black, black;
        trackHeight: 64;
    }
</mx:Style>

Tagged as: barColor, trackColors, trackHeight