Changing a Tile container’s horizontal and vertical gaps

The following example uses two slider controls to adjust the values of the horizontalGap and verticalGap styles.

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-gaps/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="horizontalGap:" />
        <mx:HSlider id="hGap"
                minimum="0"
                maximum="10"
                value="2"
                liveDragging="true"
                snapInterval="1"
                tickInterval="2"
                dataTipPrecision="0" />

        <mx:Spacer width="100" />

        <mx:Label text="verticalGap:" />
        <mx:HSlider id="vGap"
                minimum="0"
                maximum="10"
                value="2"
                liveDragging="true"
                snapInterval="1"
                tickInterval="2"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Tile id="tile"
            backgroundColor="haloSilver"
            tileHeight="50"
            tileWidth="50"
            verticalGap="{vGap.value}"
            horizontalGap="{hGap.value}">
        <mx:Button label="1" width="100%" height="100%" />
        <mx:Button label="2" width="100%" height="100%" />
        <mx:Button label="3" width="100%" height="100%" />
        <mx:Button label="4" width="100%" height="100%" />
        <mx:Button label="5" width="100%" height="100%" />
        <mx:Button label="6" width="100%" height="100%" />
        <mx:Button label="7" width="100%" height="100%" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.

Tagged as: horizontalGap, verticalGap