Storyboard animation when row data is updated

4 posts, 0 answers
  1. Kirill
    Kirill avatar
    5 posts
    Member since:
    Jun 2016

    Posted 17 Mar 2019 Link to this post

    My end goal is to trigger fading colour animation on a row when any of its data is updated to signal update to the user. To do that, a style was created:

    01.<UserControl.Resources>
    02.        <stl:EventsTreeRowStyle x:Key="ETRStyle">
    03.            ...
    04.            <stl:EventsTreeRowStyle.UpdatedStyle>
    05.                <Style TargetType="telerik:GridViewRow">
    06.                    <Style.Triggers>
    07.                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
    08.                            <BeginStoryboard>
    09.                                <Storyboard>
    10.                                    <ColorAnimation Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
    11.                                                        Duration="00:00:10"
    12.                                                        From="Gold" To="White"/>
    13.                                </Storyboard>
    14.                            </BeginStoryboard>
    15.                        </EventTrigger>
    16.                    </Style.Triggers>
    17.                </Style>
    18.            </stl:EventsTreeRowStyle.UpdatedStyle>
    19.        </stl:EventsTreeRowStyle>
    20.    </UserControl.Resources>
    21.    <Grid>
    22.        <telerik:RadTreeListView ItemsSource="{Binding EventsTree}" Style="{StaticResource TelerikTreeListViewStyle}"
    23.                                 RowStyleSelector="{StaticResource ETRStyle}">
    24.            <telerik:RadTreeListView.ChildTableDefinitions>
    25.                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Children}"/>
    26.            </telerik:RadTreeListView.ChildTableDefinitions>
    27.            <telerik:RadTreeListView.Columns>
    28.                <telerik:GridViewDataColumn Width="4*" DataMemberBinding="{Binding Details}" Header="Details"/>
    29.                ...
    30.            </telerik:RadTreeListView.Columns>
    31.        </telerik:RadTreeListView>
    32.    </Grid>

     

    However it looks like like Binding.TargetUpdated is never triggered. Is there any other way to do this?

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2321 posts

    Posted 20 Mar 2019 Link to this post

    Hello Kirill,

    According to MSDN the TargetUpdated event will be fired only when a value is transferred from the source to the target. And also when the NotifyOnTargetUpdated is set to True. Anyway, I've attached a small example showing how to acheive your requirement using very similar approach. You will need an additional property in the view model of the rows that will indicate if a change appeared and the colour animation should kick-in. I hope this helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Kirill
    Kirill avatar
    5 posts
    Member since:
    Jun 2016

    Posted 20 Mar 2019 in reply to Martin Ivanov Link to this post

    Hi Martin,

    Thank you for your reply, DataTrigger is what I was using previously, but unfortunately this approach has several issues, which is why I wanted to switch to EventTrigger:

    1. Animation is not being restarted. In your example, if you press the button again, nothing happens. This can be solved by setting IsHighlighted to false first and then to true on button press, but even this works well only if the animation has already finished and we have a "clean" restart. If you press the button multiple times in the middle of animation running, it seems to be stuck on "To" colour and then abruptly ends. I expect some of my rows to be updated more frequently than animation duration and in those cases I'd like to restart animation every time, even if it was already in the middle of running.

    2. But at the same time, if you have many rows in your grid, more than can be fit on screen at once, as you scroll up and down animation is getting relaunched without pressing a button, not only on the object which was highlighted in the past, but on the other unrelated objects as well. I suspect this issue is caused by grid virtualisation? You can replicate this easily in your example if you make several hundred iterations of adding clubs in Club.cs file and then scroll through the grid up and down after pressing the button and letting animation pass.

    These issues are the reason I found DataTrigger not a great solution and was looking for something else, like EventTrigger. Do you have any other suggestions or workarounds?

  4. Martin Ivanov
    Admin
    Martin Ivanov avatar
    2321 posts

    Posted 25 Mar 2019 Link to this post

    Hello Kiril,

    I see your point. In this case, the easiest approach that I could suggest you is to use code-behind and start the animation in code. I've attached a small example showing this approach. I hope it helps.

    Regards,
    Martin Ivanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top