How to make ns:Image tile or repeat?

Question

How can one make the ns:Image be tileable or have it repeat over and over again in the area provided?

Answer 1

So I have devised a not so clever way to do this but I haven't worked out all the kinks yet and I need help from all of you
Here's the plan:
1) Have a DataGroup inside the are where you want to tile an ns:Image
2) Enable theclipAndEnableScrolling on the DataGroup
3) Feed a dynamically generated ArrayCollection which has a reference to the same image repeated enough times so as to cause a horizontal and vertical overflow.
4) Apply a TileLayout to the DataGroup
5) And hopefully we get something that tile dynamically loaded images.
The problem right now is that I also need to set the requestedColumnCount on TileLayout to make sure that I ask it to show more columns than it respectably can, therefore, causing the clipping to happen horizontally (vertically is already working) for the tiled image as well.
a) Setting requestedColumnCount="2" (static binding) works but I don't want to hardcode that as it may be a diff # for diff size images.
b) So I have requestedColumnCount="{(dataGroup.width / image1.width) + 1}" but even though I can see the dynamically calculated number "2" being  being set on TileLayout.as when I step through it in debug mode ... it doesn't have the same effect as the static binding any ideas?
Here's the unfinished and rather hard-coded proof-of-concept source:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    height="100%"
    xmlns:ns="library://ns.adobe.com/flex/mx">
    <s:HGroup height="100%">
        <s:DataGroup
            id="dataGroup"
            width="700"
            height="140"
            clipAndEnableScrolling="true"
            >
            <s:ArrayCollection id="images">
                <!-- 502 x 72 image-->
                <ns:Image id="image1" source="images/top_banner.png" scaleContent="false"/>
                <ns:Image source="images/top_banner.png" scaleContent="false"/>
                <ns:Image source="images/top_banner.png" scaleContent="false"/>
                <ns:Image source="images/top_banner.png" scaleContent="false"/>
            </s:ArrayCollection>
            <s:layout>
                <!--<s:TileLayout verticalGap="0" horizontalGap="0" requestedColumnCount="2"/>-->
                <s:TileLayout
                    id="tileLayout"
                    verticalGap="0"
                    horizontalGap="0"
                    requestedColumnCount="{(dataGroup.width / image1.width) + 1}"
                />
            </s:layout>
        </s:DataGroup>
        <s:Label text="{(dataGroup.width / image1.width) + 1}" />
    </s:HGroup>
</s:Application>