在ColorPicker中设置背景面板尺寸?

春天

我正在尝试制作颜色数量有限的紧凑型colorPicker。我已经能够完成大部分操作,但是找不到该属性来设置背景面板的大小。

这是否受到样式或程序控制的影响?

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

在此处输入图片说明

阿克莫佐

您可以调整ColorPickerSwatchPanel使用由该定义的默认样式属性swatchPanelStyleName像这样的例子:

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

这种风格会给你这样的东西:

当然,您可以使用这些属性来获得所需的大小,但是不要忘记默认的最小最小大小SwatchPanel为100x100px。

但是要克服此限制,您可以使用mx.core.mx_internal以下示例:

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

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

这会给你这样的东西:

希望能对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章