Flex 4面板边框皮肤

Question

我正在尝试为Flex 4火花面板创建一个外观，它将在面板的左/右侧创建一个与面板标题相匹配的边框。 基本上围绕面板边缘的银色框架类似于旧的Flex 3 mx：面板。 我整天都在试验一个皮肤文件，但无法正常工作。 有任何想法吗？

Answer 1

我快速地扔了一些东西。 基于现有的PanelSkin创建皮肤。 然后去找id =“contentGroup”的组。 将其更改为以下内容：

        <s:Group  width="100%" height="100%" minWidth="0" minHeight="0">
            <s:Line stroke="{wrapperStroke}" top="0" left="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Line stroke="{wrapperStroke}" top="0" right="0" bottom="{0}" yFrom="0" yTo="{this.height}" xFrom="0" xTo="0"/>
            <s:Group id="contentGroup">
            </s:Group>
        </s:Group>

然后，您需要做的就是将您的contentGroup从边缘移开，并为笔划指定颜色和重量。 因此，前往皮肤中的updateDisplayList并添加一些代码，如：

        wrapperStroke.color = 0xD9D9D9;
        wrapperStroke.alpha = 1.0;
        wrapperStroke.caps = CapsStyle.SQUARE;

        wrapperStroke.weight = 3;
        contentGroup.top = 3;
        contentGroup.bottom = 3;
        contentGroup.left = 3;
        contentGroup.right = 3;

还可以将wrapperStroke放在声明区域中，如下所示：

<fx:Declarations>
    <s:SolidColorStroke id="wrapperStroke" />
</fx:Declarations> 

我硬编了一切，但你应该能够轻松地将它们作为样式。 你的PanelSkin现在应该是这样的 。 我增加了中风的重量，因此更容易看到。