user controls - RenderTransform.TranslateTransform animating in usercontrol in wpf -

i want create wpf usercontrol displays image , has toolbar panel, want set features listed below usercontrol:

1. tool bar panel hidden when mouse cursor out side of usercontrol.
2. when mouse cursor enter usercontrol,toolbar panel move bottom of usercontrol , locate @ bottom of usercontrol.

i create ,i have problem , see bellow:
when mouse cursor enter usercontrol:
, when mouse cursor leaved usercontrol:
problem:
when panel moving out side of usercontrol,the out side parts must invisible, bellow:
usercontrol's xaml codes:

 <usercontrol.resources>         <storyboard x:key="sb_mouseenter">             <doubleanimation to="0" storyboard.targetname="button_panel" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.y)" duration="0:0:0.2"/>         </storyboard>         <storyboard x:key="sb_mouseleave">             <doubleanimation to="40" storyboard.targetname="button_panel" storyboard.targetproperty="(uielement.rendertransform).(translatetransform.y)" duration="0:0:0.2"/>         </storyboard>     </usercontrol.resources>     <usercontrol.triggers>         <eventtrigger routedevent="mouse.mouseenter">             <beginstoryboard storyboard="{staticresource resourcekey=sb_mouseenter}"/>         </eventtrigger>         <eventtrigger routedevent="mouse.mouseleave">             <beginstoryboard storyboard="{staticresource resourcekey=sb_mouseleave}"/>         </eventtrigger>     </usercontrol.triggers>     <border cornerradius="4" borderbrush="seagreen" borderthickness="2">         <grid>             <image source="images/koala.jpg"/>             <stackpanel orientation="horizontal" verticalalignment="bottom" name="button_panel" height="40" rendertransformorigin="0.5,0.5">                 <stackpanel.rendertransform>                     <translatetransform y="40"/>                 </stackpanel.rendertransform>                 <stackpanel.background>                     <lineargradientbrush endpoint="0.5,1" startpoint="0.5,0">                         <gradientstop color="black" offset="1"/>                         <gradientstop color="#66ffffff"/>                     </lineargradientbrush>                 </stackpanel.background>                 <button padding="5" margin="5,0" width="80" height="30">                     open                 </button>                 <button padding="5" margin="5,0" width="80" height="30">                     clear                 </button>             </stackpanel>         </grid>     </border> 

just clip button_panel when leaves border cliptobounds="true" on border

something like:

... <border borderbrush="seagreen"         borderthickness="2"         cliptobounds="true"         cornerradius="4"> ... 

now cliptobounds="true" being set on border, child of border outside border not going visible.

this satisfy requirement of having stackpanel invisible when mouse not on image since translatetransform keeps outside border. see stackpanel when mouse on image , slide in/out visible inside border.