Hintergrundpaneelgröße in ColorPicker einstellen?

Ich versuche, einen kompakten colorPicker mit einer begrenzten Anzahl von Farben zu machen. Ich war in der Lage, das meiste davon zu tun, aber ich kann die Eigenschaft nicht finden, um die Größe des Hintergrundpanels einzustellen.Hintergrundpaneelgröße in ColorPicker einstellen?

Ist dies dem Styling oder der programmgesteuerten Steuerung ausgesetzt?

<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"/>

Quelle

2016-03-19 No Grabbing

Sie können die Größe des ColorPicker ‚s SwatchPanel die Standardstileigenschaften verwenden, die von der swatchPanelStyleName wie dies beispielsweise definiert:

<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>

dieser Stil wird Ihnen etwas wie folgt aus:

natürlich können Sie mit diesen Eigenschaften spielen, um die Größe zu bekommen, die Sie wollen, aber vergessen Sie nicht th bei der Standard-Mindestgröße der SwatchPanel ist 100x100px.

Aber diese Einschränkung Überführung, Sie mx.core.mx_internal wie dies zum Beispiel verwenden können:

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

und

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); 
}

, die Sie so etwas wie dieses gibt: