Flex: Custom ProgressBar bar skin won't fill entire track

I'm trying to create a simple skin for the flex progressbar control. Both the track and the bar should have rounded corners, and the bar sho开发者_如何学Gould fill the track completely in the parts where it is being shown.

Here is the bar skin I've created based off this example:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
    </fx:Script>

    <s:Rect radiusX="5" radiusY="5" top="0" left="0" right="0" bottom="0">
        <s:fill>            
            <s:SolidColor color="#bb0203" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

Here is the progress bar declaration:

<mx:ProgressBar id="progressBar" name="progressBar" top="40" left="10" width="480" height="25"
    label="" labelWidth="0"
    trackSkin="Skins.ProgressBar.TrackSkin"
    barSkin="Skins.ProgressBar.BarSkin" />

And here is the track skin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    minHeight="25">

    <fx:Script>
    <![CDATA[
        override protected function initializationComplete():void {
            useChromeColor = true;
            super.initializationComplete();
        }
    ]]>
    </fx:Script>

    <s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
        <s:fill>            
            <s:SolidColor color="#d1d3d4" />
        </s:fill>
    </s:Rect>

</s:SparkSkin>

Unfortunately, it doesn't have quite the desired effect:

Instead of the bar being flush with the track, there's a margin, and the rounded border gets cut off.

How do I fix this?

In addition to setting the barSkin property, set the maskSkin property to the same value as barSkin:

You can assign this skin the same way as others in your code:

<mx:ProgressBar id="progressBar" name="progressBar" top="40" left="10" width="480" height="25"
    label="" labelWidth="0"
    trackSkin="Skins.ProgressBar.TrackSkin"
    maskSkin="Skins.ProgressBar.BarSkin"
    barSkin="Skins.ProgressBar.BarSkin" />