Setting the corner radius on a Flex PopUpButton control

The following example shows how you can set the corner radius on the PopUpButton control in Flex by setting the cornerRadius style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
            fontWeight: normal;
            textAlign: left;
            leftIconGap: 0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            private function init():void {
                var menu:Menu = new Menu();
                menu.dataProvider = arr;
                popUpButton.popUp = menu;
            }

            private function resizePopUp():void {
                popUpButton.popUp.width = popUpButton.width;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object type="separator" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="cornerRadius:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="{popUpButton.height / 2}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:PopUpButton id="popUpButton"
            label="Please select an item..."
            cornerRadius="{slider.value}"
            arrowButtonWidth="{popUpButton.height}"
            openAlways="true"
            initialize="init();"
            creationComplete="resizePopUp();" />

</mx:Application>

View source is enabled in the following example.

Tagged as: cornerRadius