The following example shows how you can change the appearance of the close button in a TitleWindow container in Flex by setting the closeButtonSkin style (or the closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin styles individually).
| Code Example |
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> TitleWindow { closeButtonSkin: Embed("cancel.png"); /* Set values from defaults.css to null. */ closeButtonDisabledSkin: ClassReference(null); closeButtonDownSkin: ClassReference(null); closeButtonOverSkin: ClassReference(null); closeButtonUpSkin: ClassReference(null); } </mx:Style> <mx:TitleWindow id="titleWindow" title="TitleWindow" status="status message" showCloseButton="true" width="100%" height="100%" /> </mx:Application> | | If you want to use a different image for each state (up, over, down, disabled), you can either set each skin separately, as seen in the following snippet: | | <mx:Style> TitleWindow { closeButtonUpSkin: Embed("bullet_green.png"); closeButtonOverSkin: Embed("bullet_yellow.png"); closeButtonDownSkin: Embed("bullet_red.png"); closeButtonDisabledSkin: Embed("bullet_white.png"); } </mx:Style> | | Or, you can specify a SWF file and symbol name for the close button skins, as seen in the following snippet: | | TitleWindow { closeButtonDisabledSkin: Embed(source="Assets.swf", symbol="CloseButtonDisabled"); closeButtonDownSkin: Embed(source="Assets.swf", symbol="CloseButtonDown"); closeButtonOverSkin: Embed(source="Assets.swf", symbol="CloseButtonOver"); closeButtonUpSkin: Embed(source="Assets.swf", symbol="CloseButtonUp"); } |
|
