wpf - Adjusting Button Visiblity with MouseOver -

i want display button when user puts mouse on location, once mouse leaves area, button should go being hidden. here code buttons.

<stackpanel name="buttonoptions" orientation="horizontal" dockpanel.dock="bottom" background="darkblue" height="50" width="auto">     <!--<stackpanel.resources>         <style targettype="button">             <style.triggers>                 <trigger property="ismouseover" value="true">                     <setter property="visibility" value="visible"/>                 </trigger>             </style.triggers>         </style>     </stackpanel.resources>-->     <button name="loginbutton" fontsize="12" click="loginbutton_click" content="log in" width="100" height="31" margin="50,0,0,0"              fontfamily="arial" visibility="visible" isenabled="true" mouseenter="loginbutton_mouseenter" />     <button name="optionsbutton" content="options" width="100" height="31" margin="20,0,0,0" fontfamily="arial"             fontsize="12" click="optionsbutton_click" visibility="hidden" isenabled="false"/> </stackpanel> 

the resouces section commented out because tried , wasn't working. log in button has the following eventhandler attached..

loginbutton.mouseenter += new mouseeventhandler(loginbutton_mouseenter); 

the method handles is..

private void loginbutton_mouseenter(object sender, mouseeventargs e) {     messagebox.show("made in login button listener mouseover");      loginbutton.visibility = visibility.visible; } 

when run app, nothing happens when put on location button should be. however, if set log in button's visibility visible initially, can see button, , when click on it, log in logic method users sign in overridden, , prompted message box in mouseeventlistener method "made in login button listener mouseover". not that, receive 2 of these messages (as click "ok" first time, pops again) not sure why doesn't work, nor why click event method ignored , mouseevent method occurs.

any thoughts or appreciated, thanks!

off-topic: first of all, having items appear "under" mouse bad design , advise on changing it.

on-topic: others mentioned in comments section, whenever control hidden or collapsed stop processing inputs, won't trigger triggers.

you use opacity property implement behavior seek , furthermore use eventtriggers on "mouseenter" , "mouseleave" able put nice animation there. here's how write style:

<style x:key="fadeoutbutton" targettype="{x:type button}">     <style.triggers>         <eventtrigger routedevent="control.mouseenter">             <beginstoryboard>                 <storyboard >                     <doubleanimation duration="0:0:1" to="1" storyboard.targetproperty="opacity"/>                 </storyboard>             </beginstoryboard>         </eventtrigger>         <eventtrigger routedevent="control.mouseleave">             <beginstoryboard>                 <storyboard >                     <doubleanimation duration="0:0:1" to="0.2" storyboard.targetproperty="opacity"/>                 </storyboard>             </beginstoryboard>         </eventtrigger>     </style.triggers> </style> 

now, on first idea, suggest keep button visible when mouse not on (opacity = 0.2 in example above) , play animation times. if it's not option, can set animation durations 0:0:0 , opacity value ti 0 , same result visibility (at least visually).

later edit: must apply style on buttons this:

<button content="my button" style="{staticresource fadeoutbutton}" opacity="0.2"/>