Drop Shadow on AIR Application Custom Chrome

The other day out of shear curiosity I wanted to see if it was possible to create an AIR application that looked like the Microsoft Zune application.

For those of you that have not seen Zune here is a screenshot.

It is a native Window’s application in a custom chrome window and as you will notice there is a shadow around the window. My assumption is that even though this is a custom window the drop shadow is applied by the OS since this shadow is identical to the shadow around all other windows on Windows 7.

I set about creating a simple AIR application to see if I could get my main window to look like this. I didn’t get very far before I discovered (like many before have) that as soon as you turn off SystemChrome on an AIR application the drop shadow around the window disappears. I tried a few different things but nothing seemed to work. I then decided that I would try putting a drop shadow on the skin of the AIR application. Again no dice. After doing some Binging (ya – I don’t use Google) I found a few posts that talked about this but didn’t find any that had a good solution.

Most of the solutions talked about putting the shadow on a view inside of the AIR application and making this view smaller than the main window, basically having a gutter around the application that contained the drop shadow. I tried this solution but really didn’t like it because one of the issues none of the blog posts I read addressed was what happens when you maximize the window. With this solution when the window is maximized you will still see a gutter around it with a drop shadow. What I wanted was to have the window go to the edges of the screen when you maximized it.

My solution was to copy the ‘SparkChromeWindowedApplicationSkin’ and customize it to have a gutter when the window was not maximized and have the gutter disappear when the window was maximized. I also need to add a new state to the skin called ‘maximized’ and have the main application set this state when the window was maximized. In the skin I changed all of the positioning attributes so that there was a 20 pixel gutter around the application and then added these attributes with a value for the maximized state. So for example the background rectangle was changed from

<s:Rect id="backgroundRect" left="1" right="1" top="1" bottom="1" >

to

<s:Rect id="backgroundRect" left="21" right="21" top="21" bottom="21" left.maximized="1" right.maximized="1" top.maximized="1" bottom.maximized="1">

Then I added some code to the main application file to set the ‘maximized’ state when the application was maximized. This included adding a listener for the windows display state change and invalidating the skin. Then in the ‘getCurrentSkinState’ method I added a conditional statement to return the ‘maximized’ state if the window was maximized. So now we have a drop shadow around our custom chrome AIR application and it maximizes properly.

This was just an experiment and could probably use a little more work but if you want to look at the source code you can download it here.