Poor performance when switching to a tab with a lot of content

[Nathan]

I'm using the ribbon with MVVM, like in the sample.  In my implementation I've got tabs with a lot of buttons on them.  When I select a tab, it can take a couple of seconds to switch to it and display the contents.  Also, sometimes when the lag is noticeable and you can see the layout change as the buttons are added to the visual tree.

 

I've looked into implementing the solution described here, but I can't find the RadTabControl in the visual tree to set the IsContentPreserved property.  So I'm at a loss at this point on how to make it better.

 

Is there a way to improve the performance when switching between tabs?

 

Thanks for any help!

[Nathan]

I want to describe the layout of ​the content in my tabs, in case that impacts the answer.

My tabs have a single button group in them, and all the buttons are in that one group.  I did this to get the layout I wanted for all my buttons.

The most offending tab right now has 30 groups, each with about 5 buttons in them.

[Nathan]

I want to add an additional problem caused by the late rendering of the screen.  When I move to a tab, using the key tips, all the keytips get bunched up together.  If I hit escape and then hit the tab's keytip again, the button's keytips display as I'd expect.  

 

I've attached an image that displays the stacked key tips (after the tab has completely rendered), one that displays what I see when I go to the tab for the first time (before it's completely rendered), and one where the keytips display correctly when activated after the tab has already been rendered.

 

I need the tab to be laid out, and the key tips on the correct button.​

[Kiril Vandov]

Hello Nathan,

Let me get straight to your questions:
- performance: the RadRibbonView does not have any kind of virtualization and once you select a new tab its children will be realized and visualized. As you mentioned you are having more than 50 groups with 5+ buttons in each. I would like to ask you if all of these groups are visible in your application (depending on the device you are displaying them. Also do you have any customization set on the RadRibbonGroup's such as settings to use only LargeState (disabling the resizing logic of the RadRibbonView).
- IsContentPreserver property: this property works in the following manner. Once you select a TabItem from the RadTabControl it loads its content (the initial load, when you select in for the first time) there is no virtualization also and the content will be loaded based on the scenario. However after you loaded the content for the first time it is cashed and reused after that in future selection changes. (the RadRibbonView has that optimization build in and on our side only the initial selection of the items is slow). Please let us know if that is not the case in your scenario.
- KeyTips stacking: we have tried to reproduce this issue on our side but without success. That is why I would like you to provide us with more information and if possible a sample project demonstrating the issue. Doing so we will be able to faster reproduce the issue and provide you with the best possible solution.

Looking forward to hearing from you.

Kind regards,
Kiril Vandov
Telerik

[Nathan]

Here's a link to a sample project with the problems.  It's a smaller representation of the issues I'm seeing in my main application with the Ribbon.  https://drive.google.com/file/d/0B9nNhKxmzM8ETlp2Z0Y2WHRkRGs/view?usp=sharing

 

Things to see:

* Every time I go to the View tab there's a delay.  It's much more pronounced on my real application.

* When on the home tab, use the Key Tips to navigate to the Text tab, and notice all the Key Tips stacking on the left.  It will do this every time you go to that tab from another tab.  If you activate the Key Tips while on the Text tab, they display fine.

* Using the hotkeys, navigate to any of the tabs, other than View, and notice all the hotkeys are stacked on the left.

* Every time you go to the Home tab, you can see the visuals being laid out; this is much more subtle than the other issues, but this makes me think it's not actually reusing the visuals.

 

On my full application, I don't see every group.  Some of them are off the screen with the scroll indicator.  On the tab that's the biggest offender, all groups are collapsed, even at 1920x1200.

Here's the styles and xaml for my controls

Full User Control that contains the RadRibbonView.  It has a number of styles needed to implement the MVVM ribbon.
https://gist.github.com/anonymous/dfb0f3fb8bf912d91e34

Full Telerik.Windows.Controls.RibbonView.xaml.  Most changes here were done to add KeyTips to the tabs, groups, and buttons.
https://gist.github.com/anonymous/7d08e6a4671d48d1ce2d

RadRibbonGroup Style (Found within Telerik.Windows.Controls.RibbonView.xaml)
https://gist.github.com/anonymous/1312f7d2619916c45a75

RadRibbonGroupDropDownButton Style (Found within Telerik.Windows.Controls.RibbonView.xaml)
https://gist.github.com/anonymous/a8a6be446d3d30dc7a6f

RadRibbonGroupDropDownButtonTemplate (Found within Telerik.Windows.Controls.RibbonView.xaml)
https://gist.github.com/anonymous/22a0a6d90d9f4c2cc541

[Kiril Vandov]

Hello Nathan,

Thank you for the provided sample, it helped us reproduce the behavior that you are reporting.

After further investigation we have found the cause for the Stacking of the KeyTips and seeing the Visuals being laid out. The Visuals for the Keytips are Popup controls and they are not reused (they are created every time you navigated from one tab to another).
The KeyTips are not positioned correctly as Bindings for the Controls(RadButtons mainly) are not evaluated when the KeyTips are being created. For instance the Text property affects the Desired Width/Height properties of the buttons, when the KeyTips are laid out we depend on the size of the button in order to position correctly. In order to fix this you will need to simply set a Binding to the Text property in your "ButtonTemplate" which is used by the TemplateSelector:

<DataTemplate x:Key="ButtonTemplate" DataType="{x:Type local:ButtonViewModel}">
 <telerik:RadRibbonButton
        Height="20"
        Text="{Binding Text}">
....

If you bind the Text property in the Button itself the WPF framework evaluates the binding when it tries to create that button. However if you don't set the Text directly to the button and instead use it in the Implicit style in the RibbonView.xaml file it is evaluated with delay as the layout system applies styles and binding based on different factors.

That is why I would like you to set that Text binding in the DataTemplate of the ButtonTemplate and let us know if the issue are still reproduced.

Kind regards,
Kiril Vandov
Telerik