Performance in UI for Silverlight TileView

Eric Schoenholzer

138 posts

Member since:
Mar 2004

Posted 30 Mar 2010 Link to this post

Hi,

I have a smiliar issue like in this thread: http://www.telerik.com/community/forums/silverlight/tileview/huge-performance-problem-with-tileview-bug.aspx

I have up to 5 tiles, some contains a chart, other a listbox.
All tiles contains a RadFluidContentControl, the chart/listbox is for now only included for the LargeContent.

When I maximize a tile, the animation isn't smooth, there's some "stuttering" until the chart is shown.
The stuttering is longer for the first rendering of a chart with contains the default animation (Line/Bar).

Are there any best practices for this case?
Is there a way to delay the animation? For example, first maximize, then rendering the chart.

(I'm using SL4RC)

Thanks
Eric

Valentin.Stoychev

Admin

2198 posts

Posted 31 Mar 2010 Link to this post

Hi Eric Schoenholzer,

We plan improvements on that - we will use bitmap cache during the animations - we have this planned for the next major release - e.g. Q2.2010. Until then, the best will be if you hide (or change) the large content during the resize.

Kind regards,
Valentin.Stoychev
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.

toto rto

17 posts

Member since:
Apr 2010

Posted 15 Jul 2010 Link to this post

We are having the same issue.

Can you provide what would be the best way to implement hiding the tile inner control while the resizing is happening and then show it again when the resize is complete?

i can seem to find which events to use to make it work.

a propos, now that Q2 2010 is out, has caching been implemented?

thanks

Kiril Stanoev

Admin

1512 posts

Posted 16 Jul 2010 Link to this post

Hello Toto,

Yes, animation optimization was implemented. Internally it does exactly what you are describing. It captures the Content and creates a WritableBitmap. Then it collapses the Content and shows the WritableBitmap while the animation is playing. When the animation finishes, it removes the WritableBitmap and visualizes the Content.
To turn on the animation optimization, you have to set the IsAnimationOptimized="True":

<telerikNavigation:RadTileView IsAnimationOptimized="True" />

Give it a try and let me know if it helps. If you think our animation optimization does not suit you, you can subscribe for the LayoutChangeStarted and LayoutChangeEnded events. These events notify when the animation starts (LayoutChangeStarted) and when it ends(LayoutChangeEnded).

All the best,
Kiril Stanoev
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

toto rto

17 posts

Member since:
Apr 2010

Posted 19 Jul 2010 Link to this post

Thanks,

I ended up hooking up the events tileview_LayoutChangeStarted and tileview_LayoutChangeEnded but have been having a few problems. On my test here, both events seem to be fired twice per tileitem. (so if there is 4 tileitem, each event is fired 8 times).

now, the thing is that the event signature is a simple `event handler` with no argument telling us which tileitem has begun being animated and which has just ended. Is there a way to find out which tileitem is still in the process of being resized and which has completed on each tileview_LayoutChangeEnded raised?

thanks.

Kiril Stanoev

Admin

1512 posts

Posted 22 Jul 2010 Link to this post

Hello Toto,

Assume you have the following TileView definition:

<telerik:RadTileView x:Name="tileView1"

LayoutChangeStarted="RadTileView_LayoutChangeStarted"

LayoutChangeEnded="RadTileView_LayoutChangeEnded" MaximizeMode="One">

<telerik:RadTileViewItem Header="Red">

<Grid>

<Rectangle Fill="Red" />

</Grid>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem Header="Green">

<Grid>

<Rectangle Fill="Green" />

</Grid>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem Header="Blue">

<Grid>

<Rectangle Fill="Blue" />

</Grid>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem Header="Yellow">

<Grid>

<Rectangle Fill="Yellow" />

</Grid>

</telerik:RadTileViewItem>

<telerik:RadTileViewItem Header="Purple">

<Grid>

<Rectangle Fill="Purple" />

</Grid>

</telerik:RadTileViewItem>

</telerik:RadTileView>

This is one possible way the event handlers might be implemented.

private Panel content;

private void RadTileView_LayoutChangeStarted(object sender, EventArgs e)

{

// Since LayoutChangeStarted is thrown many times, hide the content of the MaximizedItem just once.

if (content == null)

{

RadTileViewItem maximizedItem = this.tileView1.MaximizedItem as RadTileViewItem;

this.content = maximizedItem.Content as Panel;

this.content.Visibility = System.Windows.Visibility.Collapsed;

}

private void RadTileView_LayoutChangeEnded(object sender, EventArgs e)

{

// Show the content of the MaximizedItem just once.

if(content != null)

{

this.content.Visibility = System.Windows.Visibility.Visible;

this.content = null;

}

Let me know what you think.

Greetings,
Kiril Stanoev
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

toto rto

17 posts

Member since:
Apr 2010

Posted 22 Jul 2010 Link to this post

Hi Kiril,

thanks for your answers.

sadly, this wont do, here is the short comming in the above answer.

the LayoutChangeEnded event is fired at the parent level (TileView) for each tileitem when they complete their respective animation. the thing is that some tileitems (most notably the ones going to minimized state) may complete their animations BEFORE the maximized tileitem has completed its movement. Then my question is how can we isolate which tile item is sitll being animated vs which one has completed with this method which has generic event handler arguments?

if i reset the content of the tileitem being maximized on the first call to LayoutChangeEnded then it may not have finished its movement (which is what happens in real life) and then we get the performance problems inherent to heavy UI activity before it completes its transition.

any idea how we can know which tileitem is sitll being animated and which one has completed on each call to LayoutChangeEnded?

thanks!

Kiril Stanoev

Admin

1512 posts

Posted 23 Jul 2010 Link to this post

Hello Toto,

With the current version it is not possible to know which item begins its layout change and which ends it. Also LayoutChangeStarted and LayoutChangeEnded should not be raised 2 times per item. This mechanism must to be improved - both events must be raised only once per item. Also, the event arguments of each event must contain a reference to the item that begins/ends its layout change. I've added a public issue tracking system item with name "TileView: LayoutChangeStarted and LayoutChangeEnded mechanism optimization". We will do our best to optimize the mechanism for our Q2 Service Pack 1 release (middle of August) but I cannot guarantee that with 100% certainty. If we don't succeed, the optimization should be available in any of the following internal builds, so I'd suggest to keep an eye on the PITS item (which will be available within 24 hours after this post). I've also updated your Telerik account accordingly. Let me know if you have further questions or comments regarding this topic.

Greetings,
Kiril Stanoev
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

toto rto

17 posts

Member since:
Apr 2010

Posted 02 Aug 2010 Link to this post

Hello,

sadly, waiting an undefined amount of time is not much of an option for us. we need this smooth and running yesterday.

Now we identified a work around which could work. we notice that while a tileitem is animating, it has its satoryboard property "SizeAnimation" to not null.

we figure we can use a combination of this property and the events above to know when an item is animating or not. The thing is that this property is set as internal and is not accessible via reflection. As a quick fix, is it possible for us to get a custom build with this property accessible?

thank

Kiril Stanoev

Admin

1512 posts

Posted 04 Aug 2010 Link to this post

Hello Toto,

If we make the SizeAnimation a protected property will this be OK with you? If it is, then we will mark it as protected and this change will be included in our Service Pack release which is in a week. Let me know what you think.

Best wishes,
Kiril Stanoev
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

toto rto

17 posts

Member since:
Apr 2010

Posted 04 Aug 2010 Link to this post

Dear Kiril,

making this property as protected would be perfect and we would greatly appreciate it. Even better would simply to add a property somewhat like this:

protected bool IsAnimating
{
get{ return SizeAnimation != null;}
}

thank you very muchm

bets regards,

Miroslav

Admin

922 posts

Posted 09 Aug 2010 Link to this post

Hi toto rto,

For the SP we added an IsAnimating protected property and a virtual OnIsAnimatingChanged method on the TileViewItem.

Hopefully you will be able to use this.

Greetings,
Miroslav
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

toto rto

17 posts

Member since:
Apr 2010

Posted 16 Aug 2010 Link to this post

this is perfect, thanks for the quick turnaround!

toto rto

17 posts

Member since:
Apr 2010

Posted 24 Aug 2010 Link to this post

hello,

I just found a small bug in the new IsAnimating property which prevents it from working properly.

the code for the UpdateIsAnimating is:

private void UpdateIsAnimating()
    {
        this.IsAnimating = (this.PositionAnimation != null) && (this.SizeAnimation != null);
    }

the thing is this method will sent animating as true ONLY if both story boards are non null. The AND should replaced with an OR like this:

private void UpdateIsAnimating()
    {
        this.IsAnimating = (this.PositionAnimation != null) || (this.SizeAnimation != null);
    }

if the fix is implemented, the code will work properly.

thanks!

Viktor Tsvetkov

Admin

382 posts

Posted 26 Aug 2010 Link to this post

Hi toto rto,

Thank you for contacting us. You are right, the correct code for updating the IsAnimating property is the second one. I have updated your account.

Sincerely yours,
Viktor Tsvetkov
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