Скругление углов BorderContainer только сверху или снизу - PullRequest
Новая
       1

Скругление углов BorderContainer только сверху или снизу

2 голосов
/ 09 июля 2011

Мне нужно округлить только верх или низ контейнера границы, а не все четыре угла, это какой-то их CSS, который я могу использовать или мне нужно создать две новые скины.Я читал, что раньше они были свойством для HBox в прежние времена. Разве это не свойство BorderContainer сейчас?

1 Ответ

9 голосов
/ 09 июля 2011

С BorderContainer вы не можете.Однако визуальный эффект, которого вы хотите добиться, может быть легко создан с помощью SkinnableContainer и пользовательского скина.На самом деле BorderContainer - это просто особая форма SkinnableContainer.

Поэтому вместо BorferContainer создайте SkinnableContainer со свойством skinClass: 

<s:SkinnableContainer left="0" right="0" top="0" bottom="0" 
                      skinClass="my.app.skins.TopRoundedCornerSkin">
    <!--- your components go here --->
</s:SkinnableContainer>

Затем создайте класс скина TopRoundedCornerSkin.mxml, например так:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:Rect id="background" left="0" right="0" top="0" bottom="0" 
            topLeftRadiusX="10" topLeftRadiusY="10" 
            topRightRadiusX="10" topRightRadiusY="10">

        <s:fill>
            <s:SolidColor color="0xffffff" />
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x000000" />
        </s:stroke>
    </s:Rect>

    <s:Group id="contentGroup" left="10" right="10" top="10" bottom="10" 
             minWidth="0" minHeight="0" />

</s:Skin>

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

...