Flex: пользовательский скин панели ProgressBar не заполнит весь трек - PullRequest
Новая
       36

Flex: пользовательский скин панели ProgressBar не заполнит весь трек

2 голосов
/ 14 апреля 2011

Я пытаюсь создать простой скин для элемента управления flex ProgressBar.И дорожка, и полоса должны иметь закругленные углы, и полоса должна полностью заполнять дорожку в тех частях, где она отображается.

Вот скин панели, который я создал на основе в этом примере: 

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

Вот объявление индикатора выполнения: 

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

А вот скин трека: 

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

К сожалению, это не такне дает желаемого эффекта:

bad fill screen shot

Вместо того, чтобы планка находилась на одном уровне с дорожкой, есть поле и закругленная граница обрезается.

Как мне это исправить?

1 Ответ

2 голосов
/ 14 апреля 2011

Помимо установки свойства barSkin, установите для свойства maskSkin то же значение, что и barSkin:

Вы можете назначить этот скин так же, как и другие в вашем коде: 

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