08
Feb
08

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>

3 Responses to “Setting the track color of a Flex ProgressBar control”


  1. 1 jonas Feb 8th, 2008 at 7:00 pm

    it seems that embedded font can not affect progressBar’s fontFamily anywhere, am I missed anything?

  2. 2 peterd Feb 9th, 2008 at 11:45 pm

    jonas,

    By default the progress bar’s font weight is “bold”. You need to make sure you are embedding a bold font weight, or you set the progress bar’s fontWeight style to “normal”.

    For more information, see “Using an embedded font with the Flex ProgressBar control”.

    Peter

  3. 3 jonas Feb 10th, 2008 at 5:26 am

    Your help was greatly appreciated! say thanks again

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".