wpf - Why is animation starting on mouse down? -
i have stackpanel consists of images:
<stackpanel height="115" name="stackpanel1" orientation="horizontal" margin="0"> <!-- *******************stackpanel resources****************************--> <stackpanel.resources> <style targettype="{x:type image}"> <style.resources> <storyboard x:key="storyboard1"> <doubleanimationusingkeyframes storyboard.targetproperty="(frameworkelement.width)"> <easingdoublekeyframe keytime="0:0:0.9" value="100"> <easingdoublekeyframe.easingfunction> <backease easingmode="easeout" /> </easingdoublekeyframe.easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> <thicknessanimationusingkeyframes storyboard.targetproperty="(frameworkelement.margin)"> <easingthicknesskeyframe keytime="0:0:0.9" value="0" /> </thicknessanimationusingkeyframes> </storyboard> <storyboard x:key="storyboard2"> <doubleanimationusingkeyframes storyboard.targetproperty="(frameworkelement.width)"> <easingdoublekeyframe keytime="0:0:0.9" value="50"> <easingdoublekeyframe.easingfunction> <backease easingmode="easeout" /> </easingdoublekeyframe.easingfunction> </easingdoublekeyframe> </doubleanimationusingkeyframes> <thicknessanimationusingkeyframes storyboard.targetproperty="(frameworkelement.margin)"> <easingthicknesskeyframe keytime="0:0:0.9" value="5" /> </thicknessanimationusingkeyframes> </storyboard> </style.resources> <setter property="width" value="60"></setter> <setter property="stretch" value="uniform"></setter> <style.triggers> <eventtrigger routedevent="mouse.mouseenter"> <beginstoryboard storyboard="{staticresource storyboard1}" /> </eventtrigger> <eventtrigger routedevent="mouse.mouseleave"> <beginstoryboard storyboard="{staticresource storyboard2}" /> </eventtrigger> </style.triggers> </style> </stackpanel.resources> <!-- *****************************************************************--> <!-- ***************** stackpanel content: ************************** --> <button command="{binding additemcommand}" style="{staticresource transparentbutton}"> <image name="imgadd" source="/wpfapp1;component/add1.png" /> </button> <image name="imgimport" source="/wpfapp1;component/png-symbol.png" /> <!-- ********************************************************** --> </stackpanel>
as can see resources of stack panel contains 2 storyboards. 1 starts when mouse enters image. , anotherone plays when mouse leaves image.
if notice children of stackpanel are:
<button command="{binding additemcommand}" style="{staticresource transparentbutton}"> <image name="imgadd" source="/wpfapp1;component/add1.png" /> </button> <image name="imgimport" source="/wpfapp1;component/png-symbol.png" />
note 1 image wrapped inside button , other 1 not.
so question is: why storyboard2 plays when hold mouse down on first child (the button) ? want storyboard2 start when mouse leaves control not when hold mouse down. second child (the image) not behavior , behaves way expect to.
in case need style of button wraps image here is:
<usercontrol.resources> <style targettype="button" x:key="transparentbutton"> <setter property="template"> <setter.value> <controltemplate targettype="button"> <border background="transparent"> <contentpresenter/> </border> </controltemplate> </setter.value> </setter> </style> </usercontrol.resources>
solve preventing event tunnel adding event handler:
previewmousedown="button_previewmousedown"
then setting event.handled=true
in other words have:
xaml:
<button command="{binding additemcommand}" previewmousedown="button_previewmousedown" style="{staticresource transparentbutton}"> <image name="imgadd" source="/wpfapp1;component/add1.png" /> </button>
code behind:
private void button_previewmousedown(object sender, mousebuttoneventargs e) { e.handled = true; // privent event tunneling // execute command associated button ((button)sender).command.execute(sender); }
Comments
Post a Comment