TreeViewItem with VirtualizingWrapPanel

4 posts, 0 answers
  1. Ziev
    Ziev avatar
    10 posts
    Member since:
    Oct 2011

    Posted 14 Oct 2013 Link to this post


    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"
        d:DesignHeight="560" d:DesignWidth="446">
            <local:BindingFallbackHelperConverter x:Key="BindingFallbackHelperConverter" Value="Visible" />
            <DataTemplate x:Key="DataItemTemplate" >
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="100" />
                    <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}"/>
            <telerik:HierarchicalDataTemplate x:Key="ExampleListInputFileTemplate"
                                          ItemsSource="{Binding ItemsCV}"
                                          ItemTemplate="{StaticResource DataItemTemplate}">
                <TextBlock Text="Open Items"/>
            <Style x:Key="WrappedStyle" TargetType="telerik:RadTreeViewItem" >
                <Setter Property="ItemsPanel">
                            <!--<telerik:RadWrapPanel ItemWidth="230"/>-->
                            <telerik:VirtualizingWrapPanel ItemWidth="230"/>
            <telerik:RadTreeView Name="m_TreeThumbnailView"
                ItemsSource="{Binding Parents}"
                ItemTemplate="{StaticResource ExampleListInputFileTemplate}"
                ItemContainerStyle="{StaticResource WrappedStyle}"                            
            <!--<ListBox Name="m_ListBox"
                     ItemsSource="{Binding Parents[0].ItemsCV}"
                     ItemTemplate="{StaticResource DataItemTemplate}"
                        <telerik:VirtualizingWrapPanel ItemWidth="230"/>

    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,
    (Software Developer at Kodak)
  2. Hristo
    Hristo avatar
    352 posts

    Posted 17 Oct 2013 Link to this post

    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.

    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft R3 2016 release webinar banner
  4. Ziev
    Ziev avatar
    10 posts
    Member since:
    Oct 2011

    Posted 17 Oct 2013 Link to this post

    Thanks Hristo for the reply.

    I will check and get back to you.

  5. Ziev
    Ziev avatar
    10 posts
    Member since:
    Oct 2011

    Posted 20 Oct 2013 Link to this post

    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.

Back to Top