I ran into this and thought I'd share the solution I used.
The problem:
How to change the colour of the check icon in the CheckBox component?
Solution:
There are a few ways to do this but here is the one I opted for since
it allows me to change the colour through styles.
1. In the Style section of your MXML file:
<mx:Style>
CheckBox {
/* Overwriting the icon skin class */
disabledIcon:
ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
downIcon: ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
overIcon: ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
selectedDownIcon:
ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
selectedDisabledIcon:
ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
selectedOverIcon:
ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
selectedUpIcon:
ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
upIcon: ClassReference("mx.skins.halo.CheckBoxIconWithCheckColor");
/* Our new style */
checkColor: #FF0000;
}
</mx:Style>
2. Copy the file CheckBoxIcon.as from the Flex SDK
2\frameworks\source\mx\skins\halo folder into the {your project
folder}\mx\skins\halo.
3. Rename the file to CheckBoxIconWithCheckColor.as.
4. Comment out line 24 (the Version.as include).
5. Replace line 137 and 138:
// Placeholder styles stub
var checkColor:uint = 0x2B333C;// added style prop
with:
/*
Modified by {your name} (05/30/2007):
The checkColor variable now gets its value from getStyle if it
can,
otherwise it defaults to what was hardcoded in the CheckBoxIcon.as
file.
*/
var defaultCheckColor:uint = 0x2B333C;
var checkColor:uint = defaultCheckColor;
if (getStyle('checkColor') != undefined) checkColor =
getStyle('checkColor');
/*
End modification.
*/
That's it. Now when you specify a value for the checkColor style. In
the style code I posted I made it red so the difference would be
obvious.
Gripe/Rant:
There is a value for the colour in the CheckBoxIcon.as file, found in
the mx.skins.halo folder. The value was hardcoded, for whatever crazy
reason. Above and below that line of code are calls to getStyle, and
the checkColor declaration has comments referring to it as a style.
Why, oh why, would this be hardcoded? I can change pretty much
anything else in almost any component using styles (frickin'
beautiful, btw), except the check icon color.
--
Derek Vadneau
