Animated cells on value changes

 

When dealing with streaming data which is updated over time the end user should be able to quickly track changes at a glance. A typical application that would benefit from this would be a financial dashboard, live data monitoring and tracking systems etc. For the purpose of illustration I have prepared a small simulation of streaming financial data (stock prices) .

  Get Microsoft Silverlight  

In my previous blogpost I have already demonstrated how we can alter/extend the behavior of cells in RadGridView by placing a user control inside. This blog post demonstrates a more real-life and business oriented scenario.
All the animation and image selection logic is capsulated in the StockPricePresenter user control. Placing this control inside the cell is a standard routine:
 <Grid.Resources> 
 <DataTemplate x:Key="StockPriceTemplate"> 
 <local:StockPricePresenter StockPrice="{Binding StockPrice}" OldStockPrice="{Binding OldStockPrice}" /> 
 </DataTemplate> 
 </Grid.Resources> 
 <telerik:RadGridView x:Name="gridViewStockPrices" IsFilteringAllowed="False" ShowGroupPanel="False" Width="350" AutoGenerateColumns="False" > 
 <telerik:RadGridView.Columns> 
...
...
...
 <telerik:GridViewDataColumn Width="*" CellTemplate="{StaticResource StockPriceTemplate}" DataMemberBinding="{Binding StockPrice}" DataFormatString="{}{0:C}" /> 
 </telerik:RadGridView.Columns> 
 </telerik:RadGridView>

Using the CellTemplate property we can tweak the cell appearance and behavior according to our requirements.

For your copy/paste needs please download the full source code here:

(Silverlight 4 VS2010) download

UPDATE :

A new version of the sample project compatible with Q1 2011


Comments

Comments are disabled in preview mode.