TreeViewItem with VirtualizingWrapPanel

[Ziev]

Hello,

We need to display data in a 2-level hierarchy of TreeView items. 
The first level is supposed to contain only a few elements, whereas the 2nd can contain even a couple of thousands.

In addition, since it is a "thumbnail view", we want the layout of WrapPanel. 
Using the RadWrapPanel works but with poor performance: opening a node in the 1st level can take more than 10 seconds. 
That's where I thought that VirtualizingWrapPanel gets into the picture...

But it doesn't work - not on our Telerik dlls version (2012.Q3), and even worse on the latest version (2013.Q2), where it crashes the application.

Here is my control's code. Note that ItemsCV is an ICollectionView property:

<UserControl x:Class="TreeViewWrapPanelVirtualization.SilverlightControl1"
    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:local="clr-namespace:TreeViewWrapPanelVirtualization"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    mc:Ignorable="d"
    d:DesignHeight="560" d:DesignWidth="446">

    <UserControl.Resources>
        <local:BindingFallbackHelperConverter x:Key="BindingFallbackHelperConverter" Value="Visible" />

        <DataTemplate x:Key="DataItemTemplate" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Text}" Margin="0,0,10,0" />
                <ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Score}"
                             Visibility="{Binding Score, Converter={StaticResource BindingFallbackHelperConverter}, FallbackValue=Collapsed}"/>
            </Grid>
        </DataTemplate>

        <telerik:HierarchicalDataTemplate x:Key="ExampleListInputFileTemplate"
                                      ItemsSource="{Binding ItemsCV}"
                                      ItemTemplate="{StaticResource DataItemTemplate}">
            <TextBlock Text="Open Items"/>
        </telerik:HierarchicalDataTemplate>

        <Style x:Key="WrappedStyle" TargetType="telerik:RadTreeViewItem" >
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <!--<telerik:RadWrapPanel ItemWidth="230"/>-->
                        <telerik:VirtualizingWrapPanel ItemWidth="230"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>


    <Grid>

        <telerik:RadTreeView Name="m_TreeThumbnailView"
            ItemsSource="{Binding Parents}"
            ItemTemplate="{StaticResource ExampleListInputFileTemplate}"
            IsVirtualizing="True"
            ItemContainerStyle="{StaticResource WrappedStyle}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Visible">
        </telerik:RadTreeView>

        <!--<ListBox Name="m_ListBox"
                 ItemsSource="{Binding Parents[0].ItemsCV}"
                 ItemTemplate="{StaticResource DataItemTemplate}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 ScrollViewer.VerticalScrollBarVisibility="Visible">

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:VirtualizingWrapPanel ItemWidth="230"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>-->

    </Grid>
</UserControl>

Also note, that when I set the height of the VirtualizingWrapPanel to, say, 500 pixels, it won't crash but just appear with a fixed height, which is not helping us.

The code at the bottom proves that a ListBox works well with the VirtualizingWrapPanel and with the same definitions that the TreeViewItem has.

I would appreciate it if you can explain me how to achieve a good performance having a "wrapped" layout on the TreeViewItems of the 2nd level.

Thanks in advance,
Ziev
(Software Developer at Kodak)

[Hristo]

Hello Ziev,

I have prepared a sample project using our latest binaries from 2013 Q3 and could not manage to crash the app using the VirtualizingWraptPanel. I am attaching the sample for convenience.

However, the virtualizing panels are not dealing well when items inside have a variable size. What I mean is, TreeViewItems nests its children inside which results in items with different height when number of children is different. Also TreeView is not designed to work with virtualizing wrap panel an there is no specific code regarding wrap panel virtualization inside the TreeView. In contrast there is some code inside the TreeView related to the tree view default panel.

In conclusion I am not sure how useful would the VirtualizingWrapPanel be when used inside TreeView.

Regards,
Hristo
Telerik

[Ziev]

Thanks Hristo for the reply.

I will check and get back to you.

Ziev

[Ziev]

Hi Hristo,

Since it seems like there's no better solution, I am going to try and inherit the TreeViewPanel class, and rewrite the MeasureOverride and ArrangeOverride methods to achieve a WrapPanel's layout.

I'll keep you updated whether I succeeded or not.

Thanks,
Ziev