Change Titlewindow close button

Question

I'm working with Flex 3.4 SDK.

I need to change the default close button image from a TitleWindow. So what I'm doing is defining a CSS selector, like this:

TitleWindow{
    close-button-skin: Embed('assets/close.png');
    border-color: #FFFFFF;
    corner-radius: 10;  
    closeButtonDisabledSkin: ClassReference(null);
    closeButtonDownSkin: ClassReference(null);
    closeButtonOverSkin: ClassReference(null);
    closeButtonUpSkin: ClassReference(null);
}

The problem is: the result image is totally squeezed beyond recognition. Probably because the image dimensions are 55x10 pixels (much wider than the default closebutton square-like dimensions) and flex forces it to fit that size.

Would anyone know how to go about fixing that?

Answer 1

It seems like the width and height are set to 16 pixels in the Panel class' createChildren() method:

closeButton.explicitWidth = closeButton.explicitHeight = 16;

You could try setting the explicitWidth and explicitHeight to the values you need in your window. Don't forget to scope closeButton to mx_internal, and import and use that namespace.

import mx.core.mx_internal;

use namespace mx_internal;

// in creationComplete for instance
mx_internal::closeButton.explicitWidth = ...;
mx_internal::closeButton.explicitHeight = ...;

Answer 2

If you want it more simple, do this,

Import the class

import mx.core.mx_internal;

Put these 3 lines in creationComplete handler

use namespace mx_internal;

closeButton.$width  = 24; //Change the button width to 24 pixels
closeButton.$height = 24; //Change the button height to 24 pixels