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

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - Bypass Geo Redirect for specific directories -

php - .htaccess mod_rewrite for dynamic url which has domain names -