Styling the TitleWindow container

The following example shows how you can customize the Flex TitleWindow container by setting the “.windowStyles” style, “.windowStatus” style, and TitleWindow style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/styling-the-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        /* Style the Window title message. */
        .windowStyles {
            color: haloBlue;
            letterSpacing: 2;
        }

        /* Style the Window status message. */
        .windowStatus {
            color: red;
            fontWeight: bold;
        }

        TitleWindow {
            dropShadowEnabled: false;
            borderAlpha: 1.0;
            borderColor: haloSilver;
            backgroundColor: haloSilver;
            cornerRadius: 0;
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="Title"
            status="Status"
            width="160">
        <mx:Text htmlText="The quick brown fox jumped over the lazy dog."
                selectable="false"
                width="100%" />
        <mx:ControlBar horizontalAlign="right">
            <mx:Button label="Button" />
        </mx:ControlBar>
    </mx:TitleWindow>

</mx:Application>

View source is enabled in the following example.