0 Replies Latest reply on Feb 25, 2012 12:41 PM by MajorJustice

    MenuBar skin change problem

    MajorJustice

      I am trying to skin an mx:Menubar in a FLEX project and have encountered a strange problem. I have given the component an FXG background, but I would like the background to change on mouse over and mouse down events. To achieve this I I have a stylesheet linked to custom MenuBarSkin.mxml skins.

       

      For some reason when the mouse is over the component the background doesn't change. However if I move the mouse over the component a second or third time it works. The same thing happens during mouse down events. If I click on the component just once the background remains the same. If I click again it works.

       

       

      Main.mxml (spark Application component):

      ...

      <fx:Style source="style.css"/>

      ...

       

       

      style.css:

      ...

      mx|MenuBar {

           backgroundSkin: ClassReference("MenuBarSkin_Normal");

           item-down-skin: ClassReference("MenuBarSkin_Down");

           item-over-skin: ClassReference("MenuBarSkin_Down");

      }

      ...

       

       

      MenuBarSkin_Normal.mxml:

      <?xml version="1.0" encoding="utf-8"?>

      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fxg="fxg.*" xmlns:mx="library://ns.adobe.com/flex/mx">

           <s:states>

                <s:State name="normal"/>

                <s:State name="disabled"/>

           </s:states>

           <fxg:FXG_Normal width="100%" height="100%"/>

      </s:Skin>

       

       

      MenuBarSkin_Down.mxml:

      <?xml version="1.0" encoding="utf-8"?>

      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fxg="fxg.*" xmlns:mx="library://ns.adobe.com/flex/mx">

           <s:states>

                <s:State name="normal"/>

                <s:State name="disabled"/>

           </s:states>

           <fxg:FXG_Normal width="100%" height="100%"/>

      </s:Skin>

       

       

       

      From what I have read on the internet skinning the menubar component is a real pain in the *** and many people seem to have problems with it.

       

      Any help is greatly appreciated.

       

      Martin