Flex Examples

The following example shows how you can change the track height of a ProgressBar control in Flex.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.controls.ProgressBarLabelPlacement;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setStyle("trackHeight", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:XML id="labelPlacementXML">
        <items>
            <item>
                <label>ProgressBarLabelPlacement.BOTTOM</label>
                <data>{ProgressBarLabelPlacement.BOTTOM}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.CENTER</label>
                <data>{ProgressBarLabelPlacement.CENTER}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.TOP</label>
                <data>{ProgressBarLabelPlacement.TOP}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.LEFT</label>
                <data>{ProgressBarLabelPlacement.LEFT}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.RIGHT</label>
                <data>{ProgressBarLabelPlacement.RIGHT}</data>
            </item>
        </items>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="trackHeight:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="32"
                value="{NaN}"
                liveDragging="true"
                snapInterval="1"
                tickInterval="4"
                dataTipPrecision="0"
                width="100"
                change="slider_change(event);" />

        <mx:Spacer width="100%" />

        <mx:Label text="labelPlacement:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{labelPlacementXML.item}" />
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="{comboBox.selectedItem.data}"
            creationComplete="progressBar.setProgress(35, 100);" />

</mx:Application>

View source is enabled in the following example.