Styling the ColorPicker control in Flex 3

I saw this come up on a list recently, so thought I’d share the answer with my loyal readership. Styling the ColorPicker control changed somewhat between Flex 2.0.1 and Flex 3. Now, instead of applying certain styles directly to the ColorPicker itself, you create a new custom style and assign the swatchPanelStyleName style on the ColorPicker. But enough of my rambling, code is worth 1000 words.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/styling-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        horizontalAlign="left"
        backgroundColor="white">

    <mx:Style>
        ColorPicker {
            swatchPanelStyleName: mySwatchPanel;
        }

        .mySwatchPanel {
            backgroundColor: haloSilver;
            columnCount: 40;
            horizontalGap: 1;
            verticalGap: 1;
            previewHeight: 50;
            previewWidth: 200;
            swatchHeight: 8;
            swatchWidth: 12;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:ColorPicker />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

Tagged as: swatchPanelStyleName