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:
 <DataTemplate x:Key="StockPriceTemplate"> 
 <local:StockPricePresenter StockPrice="{Binding StockPrice}" OldStockPrice="{Binding OldStockPrice}" /> 
 <telerik:RadGridView x:Name="gridViewStockPrices" IsFilteringAllowed="False" ShowGroupPanel="False" Width="350" AutoGenerateColumns="False" > 
 <telerik:GridViewDataColumn Width="*" CellTemplate="{StaticResource StockPriceTemplate}" DataMemberBinding="{Binding StockPrice}" DataFormatString="{}{0:C}" /> 

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


A new version of the sample project compatible with Q1 2011


Comments are disabled in preview mode.