How can I virtualize a RadPanelBar?

[Alvin]

I have a complex template defining the RadPanelBar & RadPanelBarItem. I want to have these items be virtualized as I expect there to be about 1000 items and it takes enormous amount of time for my screen to load.

I know that RadPanelBar did not support virtualization previously, but is there a way to do it now? Below is my control template

------------------------------------------------------------------------------------------------------------------------------------------------------

<this:RadPanelBar x:Name="ContainerBar"
                                    Grid.Row="1"
                                    ItemsSource="{Binding Path=TheCollection}"
                                    HorizontalAlignment="Stretch"
                                    Background="{StaticResource StrongestBrush}"
                                    Orientation="Vertical"
                                    ExpandMode="Multiple"
                                    SelectionMode="Multiple">
                    <telerik:RadPanelBar.ItemContainerStyle>
                        <Style TargetType="this:RadPanelBarItem"
                               BasedOn="{StaticResource ResourceKey={x:Type this:RadPanelBarItem}}">
                            <Setter Property="IsExpanded"
                                    Value="{Binding Path=IsExpanded,
                                                Mode=TwoWay}" />
                        </Style>
                    </telerik:RadPanelBar.ItemContainerStyle>
                    <telerik:RadPanelBar.ItemTemplate>
                        <HierarchicalDataTemplate ItemsSource="{Binding Path=TheMatchingItems}"
                                                  ItemTemplate="{StaticResource DesignerHotButtonTemplate}">
                            <TextBlock Text="{Binding Path=TheHotButtonType, 
                                                      Converter={x:Static this:ButtonTypeConverter.TheInstance}}" />
                        </HierarchicalDataTemplate>
                    </telerik:RadPanelBar.ItemTemplate>
                </this:RadPanelBar>

------------------------------------------------------------------------------------------------------------------------

---------------------- control template --------------------------------

  <ControlTemplate TargetType="telerik:RadPanelBar">
                    <Grid>

                        <telerik:LayoutTransformControl x:Name="transformationRoot">
                            <Border BorderThickness="{TemplateBinding BorderThickness}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{TemplateBinding Background}">
                                <ScrollViewer x:Name="ScrollViewer"
                                              IsTabStop="False"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              BorderBrush="Transparent"
                                              BorderThickness="0"
                                              Padding="{TemplateBinding Padding}"
                                              Margin="0"
                                              telerik:StyleManager.Theme="{StaticResource Theme}"
                                              HorizontalScrollBarVisibility="Auto"
                                              VerticalScrollBarVisibility="Auto"
                                              CanContentScroll="True">
                                    <ItemsPresenter />
                                </ScrollViewer>
                            </Border>
                        </telerik:LayoutTransformControl>
                    </Grid>
                </ControlTemplate>

[Martin Ivanov]

Hello Alvin,

I tested your code with 1000 items but I wasn't able to reproduce the slow loading time. May be I am missing something. Can you prepare a runnable project or code snippets and post them here so I can test them? To attach a project you can open a new support ticket from your telerik.com account.

About the virtualization question, there are few approaches which I can suggest.

• The first one is to use RadTreeView instead of RadPanelBar. You will need to customize the treeview a bit to look like the panelbar, but it has a built-in UI virtualization.
• The second approach is to implement custom panel with your own virtualization code. You can set the new panel to the ItemsPanel property of the RadPanelBar control
• The third approach is to implement some kind of data virtualization. This will work properly only if you know the size of the items and if they are all the same size. Or if you could measure them before add them in the visual tree. In this case you can define a size for the panelbar viewport and populate it with data. When the viewport changes (on scroll) you can remove and add new items, so that only a portion of all data is displayed.

Regards,
Martin
Telerik by Progress