Adobe Flex Show Content inside Rectangle (itemRenderer)

Question

I have a simple question, but at first I describe the scenario:

Just wrote my first ItemRenderer for testing suppose. I got a userlist view in my application and declared some objects in a dataprovider on it. On the itemRenderer, I want to display each object (user with name and an icon) inside of a rectangle in a TileGroup. My problem is now, that the rectangle is displayed next to the (user-)objects and not around it and component declarations inside the rectangle are not allowed.

This is the code of my itemRenderer:

<s:TileGroup requestedColumnCount="4" requestedRowCount="1">
    <s:Rect id="infoRect" width="100%" height="100%" left="0" right="0">
        <s:stroke>
            <s:SolidColorStroke color="0xFFFFFF" weight="1" />
        </s:stroke>
        <s:fill>
            <s:SolidColor color="white" />              
        </s:fill>
    </s:Rect>

    <s:VGroup width="100%" height="100%">
        <s:Label id="labelName" text="Name: {data.Name}"
                 color="red" />
        <s:Label id="labelVerbindung" text="Verbindung: {data.Verbindung}"
                 color="red" />
        <s:BitmapImage id="labelIcon" source="{data.Icon}" />
    </s:VGroup> 
</s:TileGroup>

As workaround I tried to use simple CSS and gave the VGroup the following attributes styleName=".borderClass", but also that showed no effect:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    .borderClass {
        border-style: solid;
        border-width: 3px;
        border-color: red;
    }
</fx:Style>

Any recommendations on how to solve this?

Answer 1

Okay, I am simply stupid... just used a BorderContainer instead of a Rectangle and it works perfectly fine.