Make MenuBar look better inside ApplicationControlBar

ApplicationControlBar(ACB) adds some default top and bottom margins, so Menubar inside it would like this:


<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml">
<mx:ApplicationControlBar>
<mx:MenuBar>
<mx:dataProvider>
<mx:XML>
<menuitem label="Home"/>
<menuitem label="Phones"/>
<menuitem label="Accessories"/>
<menuitem label="Support"/>
</mx:XML>
</mx:dataProvider>
</mx:MenuBar>
<mx:Spacer width="100%"/>
<mx:Button label="Help"/>
</mx:ApplicationControlBar>
</mx:Application>


If rollover highlight of Menubar fits vertically, it would look much better. You can see below:


<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml">
<mx:ApplicationControlBar width="100%" marginTop="0" marginBottom="0">
<mx:MenuBar height="100%">
<mx:dataProvider>
<mx:XML>
<menuitem label="Home"/>
<menuitem label="Phones"/>
<menuitem label="Accessories"/>
<menuitem label="Support"/>
</mx:XML>
</mx:dataProvider>
</mx:MenuBar>
<mx:HBox width="100%" marginTop="5" marginBottom="5">
<mx:Spacer width="100%"/>
<mx:Button label="Help"/>
</mx:HBox>
</mx:ApplicationControlBar>
</mx:Application>


What all you need to do:-

  • Set the marginTop and marginBottom of ACB to zero
  • Set the height of MenuBar to 100%
  • Move all controls excepts MenuBar to another container(HBox) inside ACB
  • Set the margins(top and bottom) of that HBox to five.

  • this code does not work.. menuitems not resoved.