Setting the header height on a Flex TitleWindow container

The following example shows you how you can change the header height on a TitleWindow container in Flex by setting the headerHeight style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="headerHeight:">
                <mx:HSlider id="slider"
                        minimum="24"
                        maximum="64"
                        value="32"
                        snapInterval="2"
                        tickInterval="4"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TitleWindow id="titleWindow"
            title="The quick brown fox jumped"
            status="{titleWindow.width}x{titleWindow.height}"
            titleIcon="@Embed('assets/TitleWindow.png')"
            showCloseButton="true"
            headerHeight="{slider.value}"
            borderColor="haloBlue"
            borderAlpha="1.0"
            width="400"
            height="150">
        <mx:VBox id="vBox" width="100%" height="100%">
            <mx:Label text="{vBox.width}x{vBox.height}" />
        </mx:VBox>
    </mx:TitleWindow>

</mx:Application>

Tagged as: headerHeight