wpf - How to animate the background of a textblock when changing the value of the bound property? -

i have pretty simple wpftoolkit:datagrid show stock market bid , ask.

my grid bound observablecollection<priceviewmodel>. priceviewmodel implements inotifypropertychanged.

the grid correctly updates , have managed background color animate intermittent in apply animation.

below xaml , snippet of view model class.

the idea color red when price update lower previous , green when it's higher...nothing fancy.

     <wpftoolkit:datagrid name="pricedatagrid" rowheaderwidth="5"  autogeneratecolumns="false" verticalcontentalignment="center" margin="0,33,0,0" horizontalalignment="left" width="868">         <wpftoolkit:datagrid.columns>             <wpftoolkit:datagridtemplatecolumn header="bid"  minwidth="40">                 <wpftoolkit:datagridtemplatecolumn.celltemplate>                     <datatemplate>                         <textblock text="{binding bid}" margin="3,1" x:name="txttextblock">                             <textblock.background>                                 <solidcolorbrush color="transparent"></solidcolorbrush>                             </textblock.background>                         </textblock>                         <datatemplate.triggers>                             <datatrigger binding="{binding bidup}" value="true">                                 <datatrigger.enteractions>                                     <beginstoryboard>                                         <storyboard>                                             <coloranimation                                                  begintime="00:00:00"                                                 duration="0:0:0.1"                                                  to="green"                                                  autoreverse="true"                                                 storyboard.targetname="txttextblock"                                                  storyboard.targetproperty="(textblock.background).(solidcolorbrush.color)">                                             </coloranimation>                                         </storyboard>                                     </beginstoryboard>                                 </datatrigger.enteractions>                             </datatrigger>                             <datatrigger binding="{binding biddown}" value="true">                                 <datatrigger.enteractions>                                     <beginstoryboard>                                         <storyboard>                                             <coloranimation                                                  begintime="00:00:00"                                                 duration="0:0:0.1"                                                  to="red"                                                  autoreverse="true"                                                 storyboard.targetname="txttextblock"                                                  storyboard.targetproperty="(textblock.background).(solidcolorbrush.color)">                                             </coloranimation>                                         </storyboard>                                     </beginstoryboard>                                 </datatrigger.enteractions>                             </datatrigger>                         </datatemplate.triggers>                     </datatemplate>                 </wpftoolkit:datagridtemplatecolumn.celltemplate>             </wpftoolkit:datagridtemplatecolumn>             <wpftoolkit:datagridtextcolumn header="ask" binding="{binding path=ask}" minwidth="40" />         </wpftoolkit:datagrid.columns>     </wpftoolkit:datagrid> 

and view model:

public class priceviewmodel : inotifypropertychanged {     public event propertychangedeventhandler propertychanged;      price _price;      private bool _bidup = false;     private bool _biddown = false;       public bool bidup     {                 {             return _bidup;         }          set         {             _bidup = value;             onpropertychanged("bidup");         }     }     public bool biddown     {                 {             return _biddown;         }          set         {             _biddown = value;             onpropertychanged("biddown");         }     }      public double bid      {          { return _price.bid; }         set         {             bidup = (value > _price.bid);             biddown = (value < _price.bid);              _price.bid = value;              onpropertychanged("bid");         }      }      public double ask      {          { return _price.ask; }          set          {             askup = (value > _price.ask);             _price.ask = value;              onpropertychanged("ask");          }      }       public priceviewmodel(price price)     {         _price = price;     }      private void onpropertychanged(string propertyname)     {         if(propertychanged != null)             propertychanged(this, new propertychangedeventargs(propertyname));     }  } 

i tried , seems work better if stop storyboards before start new one. stop storyboard, name , call

<stopstoryboard beginstoryboardname="bidupstoryboard"/> 

try this

<datatemplate.triggers>     <datatrigger binding="{binding bidup}" value="true">         <datatrigger.enteractions>             <stopstoryboard beginstoryboardname="bidupstoryboard"/>             <stopstoryboard beginstoryboardname="biddownstoryboard"/>             <beginstoryboard name="bidupstoryboard">                 <storyboard begintime="00:00:00">                     <coloranimation                          begintime="00:00:00"                         duration="0:0:0.1"                          to="green"                          autoreverse="true"                         storyboard.targetname="txttextblock"                          storyboard.targetproperty="(textblock.background).(solidcolorbrush.color)">                     </coloranimation>                 </storyboard>             </beginstoryboard>         </datatrigger.enteractions>     </datatrigger>     <datatrigger binding="{binding biddown}" value="true">         <datatrigger.enteractions>             <stopstoryboard beginstoryboardname="bidupstoryboard"/>             <stopstoryboard beginstoryboardname="biddownstoryboard"/>             <beginstoryboard name="biddownstoryboard">                 <storyboard begintime="00:00:00">                     <coloranimation                          begintime="00:00:00"                         duration="0:0:0.1"                          to="red"                          autoreverse="true"                         storyboard.targetname="txttextblock"                          storyboard.targetproperty="(textblock.background).(solidcolorbrush.color)">                     </coloranimation>                 </storyboard>             </beginstoryboard>         </datatrigger.enteractions>     </datatrigger> </datatemplate.triggers> 

also, if bidup set true 2 times in row, won't trigger second time since go true true, if want flashing effect appear each time value changes have set false @ point. e.g.

public double bid {     { return _price.bid; }     set     {         bidup = false;         biddown = false;         bidup = (value > _price.bid);         biddown = (value < _price.bid);         _price.bid = value;         onpropertychanged("bid"); } }