flex中无边框透明背景MenuBar实现.

打开FLEX帮助搜了半天,只有bordercolor属性,没有borderAlpha属性, 不想要那个该死的边框,怎么半呢方法在这里:(原作者只针对FLEX2,经测试,在FLEX3中一样是OK的~) 来自:http://www.cnblogs.com/taobataoma/archive/2008/01/22/1048332.html

在Flex中，大家是否发现MenuBar的背景与边框是不能去掉的，其实这是因为MenuBar的缺省的backgroundSkin属性使用的是mx.skins.halo.MenuBarBackgroundSkin，不管您怎么设置，该skin都会绘制背景以及边框，所以我们不能去掉MenuBar的边框。

既然这样的话，要去掉边框，只需要不使用该Skin就可以，所以我们自定义了一个Skin：MenuBarNoBorderFillSkin,该Skin什么都不做，只是用来替代MenuBarBackgroundSkin而已。

 

另外，使用了MenuBarNoBorderFillSkin以后，MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了，所以我们又做了个MenuBarActiveSkin类来响应鼠标，然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin，这样菜单栏就可以显示不同的状态。

 

 

 

"1.0" encoding="utf-8"?>
"" layout="vertical">


            import com.eshangrao.skin.MenuBarNoBorderFillSkin;
            import com.eshangrao.skin.MenuBarActiveSkin;
            [Bindable]
            public var menubarXML:XML =
                    
                    "System" >    
                        "File"/>    
                        "Save"/>    
                        "separator"/>       
                        "Exit"/>    
                        
                    "Edit">    
                        "Cut"/>    
                        "Parste"/>    
                        "Delete"/>                            
                        
                    "Navigate">    
                        "Go Into" state="killTermState"/>    
                        "Go To"/>    
                        
                ;
                    "System" >
                        "File"/>
                        "Save"/>
                        "separator"/>
                        "Exit"/>

                    "Edit">
                        "Cut"/>
                        "Parste"/>
                        "Delete"/>

                    "Navigate">
                        "Go Into" state="killTermState"/>
                        "Go To"/>


        ]]>

    "100%">
        "@label" dataProvider="{menubarXML.menuitem}" width="100%"
            backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"
            itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"
            itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"
        />

; ]]>

 

 

MenuBarActiveSkin.as

 

{
    import mx.skins.ProgrammaticSkin;
    import flash.display.Graphics;
    import mx.utils.ColorUtil;

    public class MenuBarActiveSkin extends ProgrammaticSkin
    {
        public function MenuBarActiveSkin()
        {
            super();
        }
        override protected function updateDisplayList(w:Number, h:Number):void
        {
            var backgroundAlpha:Number = getStyle("backgroundAlpha");
            var rollOverColor:uint=getStyle("rollOverColor");

            graphics.clear();
            drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha);

        }
    }
}

package com.eshangrao.skin { import mx.skins.ProgrammaticSkin; import flash.display.Graphics; import mx.utils.ColorUtil; public class MenuBarActiveSkin extends ProgrammaticSkin { public function MenuBarActiveSkin() { super(); } override protected function updateDisplayList(w:Number, h:Number):void { var backgroundAlpha:Number = getStyle("backgroundAlpha"); var rollOverColor:uint=getStyle("rollOverColor"); graphics.clear(); drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha); } } }

 

 

MenuBarNoBorderFillSkin.as

 

package com.eshangrao.skin
{
    import mx.skins.ProgrammaticSkin;
    import flash.display.Graphics;

    public class MenuBarNoBorderFillSkin extends ProgrammaticSkin
    {
        public function MenuBarNoBorderFillSkin()
        {
            super();
        }
    }
}