c# - WPF stop and reverse Storyboard animation when new animation starts -
i have 2 datatrigger animates background color of button (with reverse), part works fine.
the problem when 2 triggers fired in overlapping times, first trigger fired not reverse color, when second trigger stops reverses color whatever color when previous animation stopped.
what should do?
this example code:
<datatrigger binding="{binding isup}" value="true"> <datatrigger.enteractions> <stopstoryboard beginstoryboardname="isdownstoryboard"/> <beginstoryboard name="isupstoryboard"> <storyboard> <coloranimation storyboard.targetproperty="background.gradientstops[0].color" to="#b4e391" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[1].color" to="#61c419" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[2].color" to="#b4e391" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[3].color" to="#b4e391" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger> <datatrigger binding="{binding isdown}" value="true"> <datatrigger.enteractions> <stopstoryboard beginstoryboardname="isupstoryboard"/> <beginstoryboard name="isdownstoryboard"> <storyboard> <coloranimation storyboard.targetproperty="background.gradientstops[0].color" to="#efc5ca" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[1].color" to="#d24b5a" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[2].color" to="#ba2737" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> <coloranimation storyboard.targetproperty="background.gradientstops[3].color" to="#f18e99" duration="0:0:1" autoreverse="true" repeatbehavior="2x" /> </storyboard> </beginstoryboard> </datatrigger.enteractions> </datatrigger>
there stopstoryboard
class can use stop running storyboard
with, there no reversestoryboard
class. however, can create storyboard
runs in reverse original 1 start when stop original one. can use stopstoryboard
class (from linked page on msdn):
<!-- begin storyboard --> <eventtrigger routedevent="button.click" sourcename="beginbutton"> <beginstoryboard name="mybeginstoryboard"> <storyboard > <doubleanimation storyboard.targetname="myrectangle" storyboard.targetproperty="width" duration="0:0:5" from="100" to="500" /> </storyboard> </beginstoryboard> </eventtrigger> ... <!-- stop storyboard --> <eventtrigger routedevent="button.click" sourcename="stopbutton"> <stopstoryboard beginstoryboardname="mybeginstoryboard" /> </eventtrigger>
also, please see timeline.fillbehavior
property can set on storyboard
gets or sets value specifies how timeline behaves after reaches end of active period. can set fillbehavior.holdend
enumeration storyboard
keep it's last value when ends.
Comments
Post a Comment