Flex : L'habillage personnalisé de la barre ProgressBar ne remplit pas toute la piste

Question

J'essaie de créer un habillage simple pour le contrôle de la barre de progression Flex. La piste et la barre doivent avoir des coins arrondis, et la barre doit remplir complètement la piste dans les parties où elle est affichée.

Voici l'habillage de la barre que j'ai créé sur la base de ce qui suit cet exemple :

<?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>

Voici la déclaration de la barre de progression :

<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" />

Et voici l'habillage de la piste :

<?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>

Malheureusement, cela n'a pas tout à fait l'effet escompté :

Au lieu que la barre soit au même niveau que la piste, il y a une marge, et la bordure arrondie est coupée.

Comment puis-je réparer cela ?

Answer 1

En plus de fixer le barSkin définissez la propriété maskSkin à la même valeur que la propriété barSkin :

Vous pouvez attribuer ce skin de la même manière que les autres dans votre 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" />