Set background panel size in ColorPicker?

Question

I'm trying to make a compact colorPicker with a limited number of colors. I've been able to do most of it but I can't find the property to set the size of the background panel.

Is this exposed to styling or programmatic control?

<fx:Script>
    <![CDATA[
    [Bindable]
    public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
        '0xFFFF00', '0x88FF00', '0x00FF00', '0xFF00FF', '0xFFFFFF'];
    ]]>
</fx:Script>

<fx:Style>

    .mySwatchPanel {
    backgroundColor:#E5E6E7;
    columnCount:10;
    horizontalGap:0;
    previewHeight:20;
    previewWidth:20;
    swatchGridBackgroundColor:#000000;
    swatchGridBorderSize:0;
    swatchHeight:20;
    swatchWidth:20;
    swatchHighlightColor:#FFFFFF;
    swatchHighlightSize:1;
    textFieldWidth:72;
    verticalGap:0;
    paddingBottom:0;
    }
</fx:Style>

    <mx:ColorPicker id="colorPicker" 
                    swatchPanelStyleName="mySwatchPanel" 
                    dataProvider="{simpleDP}" 
                    showTextField="false"
                    width="40" height="40"/>

Answer 1

You can resize the ColorPicker's SwatchPanel using the default style properties that are defined by the swatchPanelStyleName like this for example :

<fx:Style>
    .mySwatchPanel {

        backgroundColor:#E5E6E7;
        swatchHighlightColor:#FFFFFF;
        swatchHighlightSize:0;
        swatchGridBorderSize:0;
        swatchGridBackgroundColor:#000000;

        textFieldWidth:0;           

        previewHeight:20;
        previewWidth:20;

        columnCount:3;

        swatchHeight:20;
        swatchWidth:20;     

        paddingBottom:2;
        paddingTop:2;           
        paddingLeft:2;
        paddingRight:2;

        horizontalGap:0;
        verticalGap:0;

    }
</fx:Style>

this style will give you something like this :

of course you can play with these properties to get the size that you want, but don't forget that the default minimum size of the SwatchPanel is 100x100px.

But to overpass this limitation, you can use mx.core.mx_internal like this for example :

<mx:ColorPicker id="colorPicker" width="40" height="40" dataProvider="{simpleDP}" 
                showTextField="false" swatchPanelStyleName="mySwatchPanel" 
                open="colorPicker_openHandler(event)" />

and

protected function colorPicker_openHandler(event:DropdownEvent):void
{           
    // resize the SwatchPanel once then remove the event listener
    colorPicker.mx_internal::dropdown.mx_internal::setUnscaledWidth(62);
    colorPicker.mx_internal::dropdown.mx_internal::setUnscaledHeight(85);
    ColorPicker(event.target).removeEventListener('open', colorPicker_openHandler);
}

which will give you something like this :

Hope that can help.