Flex2:无边框透明背景MenuBar实现

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

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

MenuBarNoBorderFillSkin.as:

 

  package com.eshangrao.skin{
   import mx.skins.ProgrammaticSkin;
   import flash.display.Graphics;
   public class MenuBarNoBorderFillSkin extends ProgrammaticSkin{
     public function MenuBarNoBorderFillSkin(){
       super();
     }
   }
 }
 
 
另外，使用了MenuBarNoBorderFillSkin以后，MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了，所以我们又做了个MenuBarActiveSkin类来响应鼠标，然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin，这样菜单栏就可以显示不同的状态。 

MenuBarActiveSkin.as:

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

测试代码如下：

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

查看示例| 查看完整源代码