Flash Builder: How to Add a Spark Group Background Color

Ideally, things would be a lot simpler if spark groups had a background color property that could be set.  But of course, that is not the case in Flex / Flash Builder.  However, there is a minor work around that one can follow to obtain background colors for spark groups.

<s:Group>
    <s:Rect width="100%" height="100%">
        <s:fill><s:SolidColor color="0x336699" /></s:fill>
    </s:Rect>
    <s:VGroup>
        <s:Label text="group content..." />
        <s:Label text="group content..." />
        <s:Label text="group content..." />
    </s:VGroup>
</s:Group>

Since vgroup doesn’t have a background color property, you can make a rectangle behind it to have desired background properties.  Flex also isn’t very functional with rectangles unless they are in a group of some kind. (i.e. in a scroller tag)  So that is why it’s best to wrap both the rectangle and the vgroup in a regular grouping segment. (same applies to hgroup, tilegroup, and other sparkgroups)

*NOTE: Put the rectangle first.  Otherwise the rectangle will be covering the spark group before it.  In flex, the last element being produced is placed in front of the previous item.

Last updated by on .

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: