Animate cell when data changes

[Geoff Smith]

Can anyone suggest an elegant way to animate a cell (i.e. flash it) when the data in it changes. I'm using GridViewDataColumn and DataMemberBinding.

The only thing I've been able to come up with is to use the grid's RowLoaded to iterate through each cell in the row and pick out the DataContext and the binding's source to create a new event handler to run an animation. Unfortunately, RowLoaded isn't the best because it's called when re-sorting etc.

[Vlad]

Hello,

 You can use the approach demonstrated here.

Best wishes,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Geoff Smith]

Thanks, that looks good.

Just to make sure I understand what's going on there. Does the animation occur because every time the price changes, a new StockPricePresenter is created to replace the old one?

[Vlad]

Hello,

 Indeed you are right! The grid will recreate the cell in case of property change.

Sincerely yours,
Vlad
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Geoff Smith]

Cool, thanks Vlad!

[Bhargava]

Hello,

I am trying to do something similar. I basically want to highlight a row based on some conditions for a certain duation. I am trying to use ColorAnimationUsingKeyFrames in a storyboard which is started by a datatrigger. Below is the xaml. The problem I am facing is when I scroll the animation seems to be carrying to other rows which do not satisfy the condition. I have enabled row virtualization. This seems something to do with recycling the row containers ? Any help is greatly appreciated.

 <Style x:Key="test" TargetType="{x:Type telerikGridView:GridViewRow}">
            <Setter Property="Background" Value="White"/>
            <Style.Triggers>
                <DataTrigger Value="true">
                    <DataTrigger.Binding>
                        <MultiBinding Mode="OneWay" Converter="{StaticResource backgroundConverter}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </DataTrigger.Binding>
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames AutoReverse="True"  BeginTime="00:00:00" Duration="00:00:5"                                                               Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame Value="Green" KeyTime="00:00:.5" />
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>

[Vanya Pavlova]

Hello Geoff,

 
Please use the following forum thread.

All the best,
Vanya Pavlova
the Telerik team

[Mat Guthrie]

Hi,

Does this work in WPF? I tried to port it across and I find that I get this initial animation but the cell doesn't show any further updates, despite the underlying data changing. If I step in to the code I find that new Presenters aren't being created. It appears that no databinding is taking place in the DataTemplate after the initial creation, despite the the dataobject implementing INotifyPropertyChanged.

The code I'm using is identical to the silverlight demo code other than that the presenter is a simplified version, with only one bound DateTime? property, Timestamp. The code behind simply checks to see if the timestamp was with X seconds and then begins the appropriate animation. EDIT: (In fact, I've subsequently done a direct port from the silverlight demo into a WPF app and get exactly the same issue).

if I remove the CellTempate completely the cell updates as expected (excluding, of course, the desire animation), showing the databinding works correctly without the DataTemplate.

Any assistance would be greatly appreciated as this 'cell highlighting' feature is critical for the financial application I'm currently developing.

Thanks

Mat

[Vanya Pavlova]

Hello Mat,

 
Can you please share with us a little bit more information about the silverlight demo you used? Considering the fact you mentioned cell highlighting, this purpose can be achieved using 

CellStyleSelectors. 
You need to simply check whether the specified condition is valid and just set this StyleSelector in an
 appropriate manner. If you create a simple animation within a simple GridViewCell style and this does not satisfy your personal requirements, you may edit the default template of GridViewCell and change the default
 animations in its different states. Also I believe that the following blog post http://blogs.telerik.com/stefandobrev/posts/10-01-18/highlighting_inline_search_for_radgridview_for_silverlight.aspx
might be interesting for you.
In case of any misunderstanding any additional information will be highly appreciated as well.
 

Greetings,
Vanya Pavlova
the Telerik team

[Mat Guthrie]

Hi Vanya,

Thanks for responding to my post. The Silverlight Demo I was referreing to is the one mentioned in a previous post in this thread, found at http://blogs.telerik.com/pavelpavlov/posts/10-05-20/displaying_live_streaming_data_with_radgridview_for_silverlight_and_wpf.aspx

As mentioned, I ported the silverlight app over to WPF (only changing x:Name to x:Key on the presenter storyboard as shown below). The solution in the above link would certainly meets my requirements (if we can get it to work in WPF) as it's likely the logic for triggering animations may eventually involve evaluating multiple parameters.

Any assist would be very much appreciated.

Mat

    <UserControl.Resources>
        <Storyboard x:Key="RedToTransparent">
            <ColorAnimation
          Storyboard.TargetName="Background"
          Storyboard.TargetProperty="Color"
          From="Red" To="Transparent" Duration="0:0:1"  />
        </Storyboard>
        <Storyboard x:Key="GreenToTransparent">
            <ColorAnimation
          Storyboard.TargetName="Background"
          Storyboard.TargetProperty="Color"
          From="Green" To="Transparent" Duration="0:0:1"  />
        </Storyboard>
    </UserControl.Resources>

[Mat Guthrie]

Can anyone offer any assistance with this issue?

Thanks

Mat

[Pavel Pavlov]

Hello Geoff Smith,

I have prepared for you a WPF version of the sample. Please find it attached.

Kind regards,
Pavel Pavlov
the Telerik team

[Mat Guthrie]

Hi Pavel,

Thank you so much for this. It worked perfectly. On the strength of this solution I will be purchasing several licenses for the WPF controls.

One final question. How can I get the presenter (and it's coloured background) to fill the entire grid cell. In your example the background colour doesn't stretch vertically to fill the entire cell. I've tried setting VerticalAlignment=Stretch to the various elements in the presenter control but the only way I can get it to fill the cell vertically is by adding a padding to the TextBlock, which is obviously unsatisfactory.

Your input would be greatly appreciated.

Thanks again

Mat 

[Pavel Pavlov]

Hi Mat,
Thank you for the nice words !

I have made a few adjustments in XAML , so that the content of animated cells is stretched over the entire cell . Please find the modified project attached.

The corrections ( in red ) :  
In MainWindow.xaml:
Compensate the default padding of the cell with negative margins:

  <local:StockPricePresenter Margin="-5,0,-3,0"  ...

In StockPricePresenter.xaml:
And adjust the size of the arrow icon :

  <Path HorizontalAlignment="Left" x:Name="Arrow" Width="25" Height="25" Stretch="Fill" Fill="Transparent" Data="F1 M 180.758,724.259L 170.642,724.259L 182.306,712.592L 159.381,712.592L 159.381,705.168L 182.226,705.168L 170.622,693.563L 180.758,693.58L 196.097,708.919M 149.432,737.219L 206.046,737.219L 206.046,680.604L 149.432,680.604L 149.432,737.219 Z ">
            <Path.RenderTransform>
                <RotateTransform x:Name="ArrowTransform" CenterX="12.5" CenterY="12.5" Angle="90" />
            </Path.RenderTransform>
        </Path>

*An alternative approach would be setting  a custom CellTemplate  but this would involve a heavier XAML.

Regards,
Pavel Pavlov
the Telerik team

[Mat Guthrie]

Hello again Pavel,

Thanks again for your response to my question. Unfortunately the suggested solution doesn't work for me. The presenter I'm using doesn't contain the arrow image that's in the example. It seems that in your example it's the sizing of the arrow the makes the colored border fill the cell, in much the same was as when I set the TextBlock padding=5.

Can you point me in the direction of CellTemplate-type solution you mentioned in your response?

Thanks

Mat

[Pavel Pavlov]

Hi Geoff ,

Here is the XAML , changed with the new approach :

<Grid >
       <Grid.Resources>
           <ControlTemplate TargetType="telerik:GridViewCell" x:Key="StockPriceTemplate">
               <local:StockPricePresenter  StockPrice="{Binding StockPrice}" OldStockPrice="{Binding OldStockPrice}" />
           </ControlTemplate>
           <Style TargetType="telerik:GridViewCell" x:Key="MyCellStyle">
               <Setter Property="Template" Value="{StaticResource StockPriceTemplate}" />
           </Style>
       </Grid.Resources>
       <telerik:RadGridView x:Name="gridViewStockPrices" IsFilteringAllowed="False" ShowGroupPanel="False" Width="350" AutoGenerateColumns="False" >
           <telerik:RadGridView.Columns>
               <telerik:GridViewDataColumn Width="150" Background="AliceBlue" DataMemberBinding="{Binding CompanyName}" />
               <telerik:GridViewDataColumn Background="Bisque"  DataMemberBinding="{Binding OldStockPrice}" TextAlignment="Right" DataFormatString="{}{0:C}" />
               <telerik:GridViewDataColumn Width="*" CellStyle="{StaticResource MyCellStyle}"  DataMemberBinding="{Binding StockPrice}" DataFormatString="{}{0:C}" />
           </telerik:RadGridView.Columns>
       </telerik:RadGridView>
   </Grid>

The idea is : When we used the CellTemplate propery, the content was inserted inside the cell with the default padding of 3 and 5 pixels.

In this new XAML we redefine the whole control template , removing the default paddings and placing our user control directly.

You may use my previous project and just replace the XAML , to test it.

All the best,
Pavel Pavlov
the Telerik team

[hermann]

Hello Pavel,
I just expierienced a strange behavior when sorting the last column.
Then all cells become green.
How can this be solved?

Best regards,
Hermann

[Pavel Pavlov]

Hi Herman,

Which of the solutions mentioned  in this thread are you using and which version of Telerik controls  ?

All the best,
Pavel Pavlov
the Telerik team

[hermann]

Both,
the original AnimatedCellsWPF package
and the extended AnimatedCellsWPF_stretchincell zip with the patch applied

My Telerik dlls are WPF 2011 Q3 (2011.3.1220.40)

Kind regards,
Hermann

[Vera]

Hi,

 I tested both AnimatedCellsWPF and AnimatedCellsWPF_stretchincell projects with our Q3 SP1 2011 (2011.3.1220), but I was not able to get the behavior you described. Please take a look at the video I captured.
May I ask you to open a support ticket and send the project demonstrating the issue?

I am looking forward to hearing from you.

Kind regards,
Vera
the Telerik team

[hermann]

Hello Vera,
your video shows exactly what i am talking about:
as soon as you click the header to sort the items in the last column, all previously red items become green
whereas they should remain red but just sorted.

Kind regards,
Hermann

[Pavel Pavlov]

Hi Herman ,

Please check the modified version of my sample attached for a possible solution to the problem.

Greetings,
Pavel Pavlov
the Telerik team

[hermann]

Hi Pavel,
I am sorry to say, the solution does not fix the problem.
If I set the timerinterval to 10 secs, then sorting still does not work as expected.

All the best,
Hermann