Changing the preview color width for the ColorPicker control in Flex 3

The following example shows how you can change the preview color width in the ColorPicker control’s drop down swatch panel by setting the swatchPanelStyleName and previewWidth styles in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/changing-the-preview-color-width-for-the-colorpicker-control-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("previewWidth", evt.value);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

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

        .myCustomSwatchPanelStyleName {
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="previewWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="145"
                        value="45"
                        snapInterval="1"
                        tickInterval="5"
                        liveDragging="true"
                        dataTipPrecision="0"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker" />

</mx:Application>

View source is enabled in the following example.

You can also set the previewWidth style directly in an external .CSS file or <mx:Style /> block using something similar to the following snippet:

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

    .myCustomSwatchPanelStyleName {
        previewWidth: 145;
    }
</mx:Style>

Tagged as: previewWidth, swatchPanelStyleName