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

sq1990

打开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. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">   
3.     <mx:Script>   
4.     <![CDATA[   
5.             import com.eshangrao.skin.MenuBarNoBorderFillSkin;   
6.             import com.eshangrao.skin.MenuBarActiveSkin;               
7.             [Bindable]   
8.             public var menubarXML:XML =   
9.                 <menu>   
10.                     <menuitem label="System" >   
11.                         <menuitem label="File"/>   
12.                         <menuitem label="Save"/>   
13.                         <menuitem type="separator"/>      
14.                         <menuitem label="Exit"/>   
15.                     </menuitem>   
16.                     <menuitem label="Edit">   
17.                         <menuitem label="Cut"/>   
18.                         <menuitem label="Parste"/>   
19.                         <menuitem label="Delete"/>                           
20.                     </menuitem>   
21.                     <menuitem label="Navigate">   
22.                         <menuitem label="Go Into" state="killTermState"/>   
23.                         <menuitem label="Go To"/>   
24.                     </menuitem>   
25.                 </menu>;      
26.         ]]>   
27.     </mx:Script>   
28.     <mx:ApplicationControlBar width="100%">   
29.         <mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"  
30.             backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"  
31.             itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"  
32.             itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"  
33.         />   
34.     </mx:ApplicationControlBar>   
35. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import com.eshangrao.skin.MenuBarNoBorderFillSkin; import com.eshangrao.skin.MenuBarActiveSkin; [Bindable] public var menubarXML:XML = <menu> <menuitem label="System" > <menuitem label="File"/> <menuitem label="Save"/> <menuitem type="separator"/> <menuitem label="Exit"/> </menuitem> <menuitem label="Edit"> <menuitem label="Cut"/> <menuitem label="Parste"/> <menuitem label="Delete"/> </menuitem> <menuitem label="Navigate"> <menuitem label="Go Into" state="killTermState"/> <menuitem label="Go To"/> </menuitem> </menu>; ]]> </mx:Script> <mx:ApplicationControlBar width="100%"> <mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%" backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin" itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin" itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin" /> </mx:ApplicationControlBar> </mx:Application>

 

 

MenuBarActiveSkin.as

 

package com.eshangrao.skin   

1. {   
2.     import mx.skins.ProgrammaticSkin;   
3.     import flash.display.Graphics;   
4.     import mx.utils.ColorUtil;   
5.   
6.     public class MenuBarActiveSkin extends ProgrammaticSkin   
7.     {   
8.         public function MenuBarActiveSkin()   
9.         {   
10.             super();   
11.         }   
12.         override protected function updateDisplayList(w:Number, h:Number):void  
13.         {   
14.             var backgroundAlpha:Number = getStyle("backgroundAlpha");   
15.             var rollOverColor:uint=getStyle("rollOverColor");   
16.                
17.             graphics.clear();   
18.             drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha);   
19.                
20.         }   
21.     }   
22. }  

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

 

1. package com.eshangrao.skin   
2. {   
3.     import mx.skins.ProgrammaticSkin;   
4.     import flash.display.Graphics;   
5.   
6.     public class MenuBarNoBorderFillSkin extends ProgrammaticSkin   
7.     {   
8.         public function MenuBarNoBorderFillSkin()   
9.         {   
10.             super();   
11.         }   
12.     }   
13. }