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.