WPF C1DataGrid Cell Animaton

WPF binding model is very strong and there are lot of useful properties which can improve the user experience as well as the developer experience. One such useful property is "NotifyOnTargetUpdated". WPF raises a data update event each time the binding source or target has been updated. Internally, this event is used to inform the user interface that it should update, because the bound data has changed. Obviously, our data class should implement INotifyPropertyChanged interface for this. Let's see how we can use this for animating cells (to display value change) in ComponentOne C1DataGrid. Create a new WPF project and drag and drop C1DataGrid onto Window. Create a new class implementing INotifyPropertyChanged interface. Bind the C1DataGrid to a List of the class objects. The trick is to listen to the LoadedCellPresenter event of C1DataGrid and change the binding there so as to enable "NotifyOnTargetUpdated". We can add required triggers to DataGridCellPresenter for animating cells in the event described above.

public class Product : INotifyPropertyChanged  
{  
      public int _productNumber;  
      public string _name;  

         public int ProductNumber  
        {  
            get  
         {  
               return _productNumber;  
             }  
            set  
            {  
              _productNumber = value;  
                 if (PropertyChanged != null)  
                  PropertyChanged(this, new PropertyChangedEventArgs("ProductNumber"));  
             }  
       }  

        public string Name  
      {  
           get  
           {  
               return _name;  
          }  
         set  
        {  
            _name = value;  
                if (PropertyChanged != null)  
               PropertyChanged(this, new PropertyChangedEventArgs("Name"));  
            }  
      }  
        public event PropertyChangedEventHandler PropertyChanged;  

 }  

void datagrid_LoadedCellPresenter(object sender, C1.WPF.DataGrid.DataGridCellEventArgs e)  
 {  
 if ((e.Cell.Column.Index == 3) || (e.Cell.Column.Index == 4))  
 {  
 e.Cell.Presenter.DataContext = e.Cell.Row.DataItem;  
 TextBlock tb = e.Cell.Presenter.Content as TextBlock;  

 Binding bcurrent = tb.GetBindingExpression(TextBlock.TextProperty).ParentBinding;  
 Binding bnew = CopyBinding(ref bcurrent);  
 tb.SetBinding(TextBlock.TextProperty, bnew);  

 Dispatcher.BeginInvoke(new System.Threading.ThreadStart(() =>  
 {  
 var ca = new ColorAnimation(Colors.Transparent, Colors.Red, TimeSpan.FromSeconds(1));  
 Storyboard.SetTarget(ca, e.Cell.Presenter);  
 Storyboard.SetTargetProperty(ca, new PropertyPath("(Background).(SolidColorBrush.Color)"));  

 var et = new EventTrigger(Binding.TargetUpdatedEvent);  
 et.Actions.Add(new BeginStoryboard  
 {  
 Storyboard = new Storyboard  
 {  
 Duration = TimeSpan.FromSeconds(1),  
 Children = { ca },  
 AutoReverse = true,  
 }  
 });  
 e.Cell.Presenter.Triggers.Add(et);  
 }), System.Windows.Threading.DispatcherPriority.Loaded);  
 }  
 }  

private Binding CopyBinding(ref Binding CurrentBinding)  
 {  
 Binding NewBinding = new Binding();  
 PropertyInfo[] fields = typeof(Binding).GetProperties();  
 foreach (PropertyInfo pi in fields)  
 {  
 if ((pi.GetValue(CurrentBinding, null) != null) &&(pi.CanWrite==true))  
 pi.SetValue(NewBinding, pi.GetValue(CurrentBinding, null), null);  
 }  
 NewBinding.NotifyOnTargetUpdated = true;  
 return NewBinding;  
 }  

Run the application. Whenever the user changes values in the cell with column index 0, CellPresenter will animate. Even if the underlying property is changed, the cell would flash to indicate that the value has been changed. That is all you have to do, feel free to download the attached sample. Download Sample