Flex Examples

The following example shows how you can set the swatch grid background color on a Flex 3 ColorPicker control by setting the swatchGridBackgroundColor style. You can also see how you can set the horizontalGap, and verticalGap styles using CSS.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/29/changing-the-swatch-grid-background-color-for-a-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        .myCustomSwatchPanelStyleName {
            /* border */
            swatchBorderColor: white;
            swatchBorderSize: 1;

            /* highlight */
            swatchHighlightColor: black;
            swatchHighlightSize: 2;

            /* gap */
            horizontalGap: 2;
            verticalGap: 2;

            /* background */
            swatchGridBackgroundColor: red;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormItem label="default:">
            <mx:ColorPicker />
        </mx:FormItem>
        <mx:FormItem label="horizontalGap/verticalGap = 2:">
            <mx:ColorPicker id="colorPicker"
                    swatchPanelStyleName="myCustomSwatchPanelStyleName" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.