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.