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:
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)
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:local
=
"clr-namespace:TreeViewWrapPanelVirtualization"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
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)