Как правильно установить угловой радиус списка MX и получить закругленные углы?

Question

У меня есть компонент mx.components.List с кучей пользовательских стилей:

<mx:Style>
    .dropDownListStyle
    {
        border-style: solid;
        corner-radius: 4;
    }
</mx:Style>

Я создаю список в AS:

_dropDown = new List();
...
_dropDown.styleName = "dropDownListStyle";

Затем список добавляется в виде всплывающего окна с помощью PopUpManager:

PopUpManager.addPopUp( _dropDown, this );

Проблема в том, что углы вновь созданного всплывающего окна не округлены. Я обнаружил, что для получения эффекта нужен стиль рамки, но добавление этого свойства не помогло. Я строю проект с помощью Flex 4.1, но List и его родительские компоненты являются компонентами MX, и их перенос в Spark требует много усилий.

Есть идеи, как мне получить закругленные углы? Заранее спасибо!

Answer 1

Для компонентов списка (ни mx, ни spark) стиль углового радиуса не определен. вам следует рассмотреть возможность переопределения компонента списка, реализации этого стиля или гораздо более простого способа, поместить свой список без каких-либо границ в контейнер, который может установить его угловой радиус, и открыть этот компонент:

/*Box, Canvas, Group...*/
.dropDownListHolderStyle { 
    corner-radius: 4;
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    border-style: solid;
    border-weight: 1;
    padding-bottom: 2;
    padding-top: 2;
    padding-left: 2;
    padding-right: 2;
}
/*List*/
.dropDownListStyle {
    background-color: #FFFFFF;
}

и компонент:

<s:VGroup id='_dropDownPopup' styleName='dropDownListHolderStyle' [...]>
    <s:List id='_dropDown' styleName='dropDownListStyle' [...] />
</s:VGroup>

[...]

PopUpManager.addPopUp( _dropDownPopup, this );

Answer 2

Я использовал свойство стиля cornerRadius, а не corner-radius, возможно, вы его неправильно написали?Но я сделал только Spark, чтобы он не работал в вашем контексте.