Flex Examples

In a previous example, “Alternating row colors in a Flex Tree control using the alternatingItemColors style”, we saw how you can alternate row colors by setting the alternatingItemColors style.
The following example shows how you can alternate item colors based on the item’s depth in a Flex Tree control by setting the depthColors style to an array of colors.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/27/alternating-row-colors-in-a-flex-tree-control-using-the-depthcolors-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1">
                        <node label="One.1.1">
                            <node label="One.1.1.1">
                                <node label="One.1.1.1.1" />
                            </node>
                        </node>
                    </node>
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            depthColors="[#FFFFFF, #EEEEEE, #DDDDDD, #CCCCCC, #BBBBBB, #AAAAAA]"
            rowCount="4"
            width="300" />

</mx:Application>

View source is enabled in the following example.