Changing a Tile container’s horizontal and vertical alignment

The following example shows how you can horizontal and vertical alignment in a Tile container using the horizontalAlign and verticalAlign styles respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-tile-containers-horizontal-and-vertical-alignment/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="horizontalAlign:" />
        <mx:ComboBox id="hAlign">
            <mx:dataProvider>
                <mx:String>left</mx:String>
                <mx:String>center</mx:String>
                <mx:String>right</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="100" />

        <mx:Label text="verticalAlign:" />
        <mx:ComboBox id="vAlign">
            <mx:dataProvider>
                <mx:String>top</mx:String>
                <mx:String>middle</mx:String>
                <mx:String>bottom</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:Tile id="tile"
            backgroundColor="haloSilver"
            tileHeight="50"
            tileWidth="50"
            horizontalAlign="{hAlign.selectedItem}"
            verticalAlign="{vAlign.value}">
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
        <mx:VBox width="30" height="30" backgroundColor="red" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.

In retrospect, perhaps it isn’t as obvious as I would have hoped. What’s happening in the above example is we set the tile height and width to 50 pixels each. Within each tile, is a 30 pixel square box. So if you change the horizontal alignment to “center” and vertical alignment to “middle”, the red box should be beautifully centered within the the grid.