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: 

  import mx.utils.ColorUtil;

  public class MenuBarActiveSkin extends ProgrammaticSkin{

    public function MenuBarActiveSkin(){

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

    本文轉自 OldHawk  部落格園部落格，原文連結：http://www.cnblogs.com/taobataoma/archive/2008/01/22/1048332.html，如需轉載請自行聯系原作者