Item Animation Performance

[Mauro]

Hi,

I was busy profiling my application with the tools provided in Visual Studio, and a few times I have seen the following warning.

Total layout time (0.20 seconds) is high. Element Telerik.Windows.Controls.RadDataBoundListBox took the most time in layout and is contributing to the low frame rate. This could be because CPU-bound animations are causing layout updates.

My animations are quite simple and is as follows :

<telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
              <telerikCore:RadFadeAnimation Duration="0:0:0.2"
                                            EndOpacity="1"
                                            StartOpacity="0">
                  <telerikCore:RadFadeAnimation.Easing>
                      <CubicEase EasingMode="EaseIn" />
                  </telerikCore:RadFadeAnimation.Easing>
              </telerikCore:RadFadeAnimation>
          </telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>

My datatemplate for the items isnt anything special and is a button with a textblock and an image.

<DataTemplate x:Key="ItemTemplate">
            <Button Margin="0,0,0,12"
                    HorizontalContentAlignment="Stretch"
                    Command="{Binding MyCommand}"
                    CommandParameter="{Binding}"
                    Style="{StaticResource MyStyle}"
                    toolkit:TiltEffect.IsTiltEnabled="True">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0"
                               FontSize="{StaticResource PhoneFontSizeSmall}"
                               Style="{StaticResource PhoneTextNormalStyle}"
                               Text="{Binding MyText}"
                               TextWrapping="Wrap" />

                    <Image Grid.Column="1"
                           Width="23"
                           Height="16"
                           Margin="12,6,12,6"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Top"
                           Stretch="Uniform">
                        <Image.Source>
                            <BitmapImage CreateOptions="BackgroundCreation"
                                         UriSource="{Binding MySource}" />
                        </Image.Source>
                    </Image>

                </Grid>
            </Button>
        </DataTemplate>

Is there something I'm missing or doing wrong that is causing the warning to show up?

Thanks very much

Regards,
Mauro


Update : I have been profiling my application some more and I see that the some or other animations of the RadDataboundListbox are running on the UI Thread. The animation that I was using was a RadMoveAnimation. Afterwards I even set the ItemAnimationMode to None and removed the ItemAddedAnimation and the Profiler still shows that there are animations running on the UI Thread.

I switched the RadDataboundListBox to a normal ListBox and those UI Thread Animations went away on the profiler.

I was wondering what those animations are on the profiler (As I have tried to disable them and they still show up) and is there anyway to move the to the Composite Thread?

(I have attached a small image snippet of the profiler showing animations on the UI Thread)

Regards,
Mauro

[Kiril Stanoev]

Hi Mauro,

Thank you for contacting us. We will research the described issue and get back to you as soon as we have an answer.

Thank you for your patience and understanding.

Meanwhile, if you have additional questions or comments, don't hesitate to write us back. 

Regards,
Kiril Stanoev
the Telerik team

[Mauro]

Hey Kiril,

I just done a quick test for you guys...I have a RadDataboundListBox and a normal list box on the main page. Just comment out one of them, run the profiler and then do the same for the other one.

You'll see that when you have the Raddataboundlistbox, you have these animations that are running on the UI Thread, even though no animations should be played?

<phone:PhoneApplicationPage x:Class="RadControlsWindowsPhoneApp1.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
                            xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
                            d:DesignHeight="768"
                            d:DesignWidth="480"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            SupportedOrientations="Portrait"
                            mc:Ignorable="d">

    <!--  LayoutRoot is the root grid where all page content is placed  -->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--  TitlePanel contains the name of the application and page title  -->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Text="MY APPLICATION" />
            <TextBlock x:Name="PageTitle"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}"
                       Text="page name" />
        </StackPanel>

        <!--  ContentPanel - place additional content here  -->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">

            <telerikPrimitives:RadDataBoundListBox x:Name="List"
                                                   EmptyContent=""
                                                   ItemAnimationMode="None"
                                                   ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                                   ScrollViewer.VerticalScrollBarVisibility="Disabled">
            </telerikPrimitives:RadDataBoundListBox>

                <!--<ListBox x:Name="List"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollBarVisibility="Disabled" />-->

        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

And the code behind is

using System.Collections.Generic;
using Microsoft.Phone.Controls;

namespace RadControlsWindowsPhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            IList<int> listValues = new List<int>();

            for (int i = 0; i < 10; i++)
            {
                listValues.Add(i);
            }

            List.ItemsSource = listValues;
        }
    }
}

Like I said I'm not 100% sure why those animations are there and how to get them to the Compositor thread?

Regards,
Mauro

[Mauro]

Hey Kiril,

I was just wondering if you guys have managed to replicate the issue?

Thanks very much

Regards,
Mauro

[Kiril Stanoev]

Hi Mauro,

Yes, I managed to reproduce the issue and I can confirm that the animations execute on the UI thread which causes certain performance hits. However, we will need more time to determine whether there is a viable fix or not. We will do our research and will let you know as soon as possible some time next week.

Let me know if this timeframe is OK with you.

All the best,
Kiril Stanoev
the Telerik team

[Mauro]

Hi Kiril,

Glad you guys managed to replicate the issue...next week is no problem at all. Hope you guys find a solution and thanks  for looking into it.

Regards,

Mauro

[Deyan]

Hi Mauro,

This is a quick follow-up with some further info on the discussed topic.

The storyboards that you're seeing are actually the ones used to transition between visual states of the visual containers (RadDataBoundListBoxItems). They are not related to the ItemAdded/ItemRemoved animations. These storyboards are executed on the UI thread since they set properties that are not animatable on the Compositor thread. This is the reason why you're seeing the mentioned warnings in the profiler. We will, however, dig into this behavior and try to improve it but if you don't see any considerable performance decrease in your app you should not be worried.

You could also use the RealizedItemsBufferScale property to decrease the amount of visual containers realized at once during initial load of the control. This property accepts values starting from 1.0 to 4.0. If you set, for instance, 1.0, the UI buffers will have 1.0x the size of the viewport and thus less visual containers will be created for UI virtualization compared to the case when you set 2.0.

I hope this is helpful.

Check out the RealizedItemsBufferScale property and let me know how it works for you.

All the best,
Deyan
the Telerik team

[Mauro]

Hi Deyan,

Thanks very much for the reply. 

I tried using the RealizedItemsBufferScale , but it doesn't seem to help. I have 3 RadDataboundListBoxes with about 2-3 items in each (The Items in the listboxes are basic as well...basically a Button with text and sometimes an image which is loaded on the background thread)

When a user naviagates to the page, none of the animations play when they load and just "pop" into place. From what I have seen it could be because of the storyboards on the UI Thread. 

If you guys manages to see if you can improve it, it would be greatly appreciated :)

Thanks very much again

Regards,
Mauro

[Deyan]

Hi Mauro,

Thanks for getting back to me.

Please note that we cannot control whether a Storyboard is played on the UI thread or not. Storyboards execute on the Compositor thread in case the properties that are animated are supported by the GPU . Such properties are Opacity, RenderTransforms,  etc. If a storyboard animates the Size of an element, or its Background color, it will be always executed on the UI thread.

As I already mentioned, the Storyboards that you see while profiling your app come from the visual states of the containers, not the animations defined by the listbox. If you don't have Item Animations, these storyboards will still be executed to set the visual state of the container itself (like check box visible, not visible, etc.).

We will take a look into this. Also, do you experience any performance issues while using your app or the results of the profiling hint into this direction?

Thanks for your time.

All the best,
Deyan
the Telerik team

[Mauro]

Hey Deyan,

Thanks for the reply. I understand that there is nothing that you can do about the items playing on the UI Thread.

I'm am seeing a bit of performance issues on the device itself. Like I said, the lists just pop onto the screen instead of animating in...If I reduce the lists to say one, they do animate. 

I have also tried to strip out any of my code to ensure that it wasn't causing an issue as well as running everything that could be done on a background thread, on a background thread.

Thanks so much again  :)

Regards,
Mauro

[Deyan]

Hi Mauro,

I think it will be easier for us to help you if you send us a demo project where the issue is reproducible. In this way we will be able to better assist you in finding the solution.

You can also provide us with the steps to reproduce the case if sending a project is not the way to go for you.

Thanks for your time.

Greetings,
Deyan
the Telerik team

[Stuart]

hi there,

I'd be really interested to know if you got to the bottom of this? I am also experiencing list items 'popping' up rather than animating smoothly.

thanks,
Stuart

[Deyan]

Hi Stuart,

Thanks for writing.

Similar issues are normally caused by implementations specific to the project. There is not a single solution for them and therefore it will be a lot easier for us to take a look at your project and see what we can do instead of just guessing.

Is it possible for you to attach your project in a new support ticket in a ZIP archive for further investigation?

Thanks for your time.

Regards,
Deyan
Telerik