Thursday, May 20, 2010
by
Pavel Pavlov
|
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) .
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 :