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.