Problem
I want to add custom style properties to my MXML based components like I can in Actionscript based components.
Solution
Add the <mx:Metadata> tag with your custom style declaration.
Detailed explanation
I often create very simple MXML based components but want to create custom styles for them. In order to do this I add the following code to my MXML to create a style property "customStyleColor" which will take a hex color value:
<mx:Metadata>
[Style(name="customStyleColor", type="uint", format="Color",inherit="no")]
</mx:Metadata>
My component would may look like this:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="40">
<mx:Metadata>
[Style(name="customStyleColor", type="uint", format="Color",inherit="no")]
</mx:Metadata>
<mx:Text id="simpleTextField" text="custom color" fontColor="getStyle('customStyleColor')" />
</mx:Canvas>
My application code like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xnlns="*" layout="absolute">
<CustomComponent width="200" customStyleColor="#FF9900" />
</mx:Application>
