PhiLong
Topic Author
Posts: 10
Joined: 16 Mar 2017, 04:51

Expanding treeview performent

17 May 2017, 06:49

Is there any way to use the VirtualizingStackPanel in tree view. It take time to expand a node with 1500 children. How can I improve the expanding time for that node?

Thank you
 
User avatar
ai_enabled
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Expanding treeview performent

17 May 2017, 07:42

From the release notes, only virtualization of ListView and ListBox controls was announced ("Feature UI virtualization implemented and enabled by default for ListView and ListBox controls." v1.2.6f2).
But it works fine for us with regular ItemsControl with the following style:
<Style TargetType="{x:Type ItemsControl}">
    <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
    <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Recycling" />
    <Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
</Style>
(we're using it to display about 10k log entries and it works instantly, without virtualization it's unusuable)

TreeView is inherited from ItemsControl, so perhaps it will also virtualize if you apply this properties.
Also this answer might be useful - http://stackoverflow.com/a/8183330

Regards!

UPD. Also this answer - http://stackoverflow.com/a/11600489
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
PhiLong
Topic Author
Posts: 10
Joined: 16 Mar 2017, 04:51

Re: Expanding treeview performent

18 May 2017, 05:28

Dear ai_enabled,
Thank you for your quick response.

But I have a question. Does the virtualization always enable? I tried to set IsVirtualizing to True or False, but I can't find any different.
<Style TargetType="{x:Type ItemsControl}" BasedOn="{StaticResource NoesisControlStyle}">
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
        <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Recycling" />
        <Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <Border
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Padding="{TemplateBinding Padding}">
                        <ItemsPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
<TreeView  ItemsSource="{Binding Root}" x:Name="modelTree" >
	<TreeView.ItemsPanel>
		<ItemsPanelTemplate>
			<VirtualizingStackPanel IsItemsHost="True" />                   
		</ItemsPanelTemplate>
	</TreeView.ItemsPanel>
	<TreeView.ItemContainerStyle>
		<!--Style binds a TreeViewItem to a TreeViewItemViewModel. -->
		<Style TargetType="{x:Type TreeViewItem}">
			<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
			<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
			<Setter Property="FontWeight" Value="Normal" />
			<Style.Triggers>
				<Trigger Property="IsSelected" Value="True">
					<Setter Property="FontWeight" Value="Bold" />
					<Setter Property="local:MainLayout.BringIntoViewWhenSelected" Value="True" />
				</Trigger>
			</Style.Triggers>
		</Style>
	</TreeView.ItemContainerStyle>
	<TreeView.Resources>
		<HierarchicalDataTemplate DataType="{x:Type viewModel:FileNode}" ItemsSource="{Binding Children}">
			<StackPanel Orientation="Horizontal" ContextMenu="{StaticResource TreeViewContextMenuTemplate}">
				<Image Width="16" Height="16" Margin="3,0" Source="../Images/Icons/ic_file_modeltree.png" />
				<TextBlock Text="{Binding Name}" Margin="0,2" />
			</StackPanel>
		</HierarchicalDataTemplate>
		<HierarchicalDataTemplate DataType="{x:Type viewModel:GroupNode}" ItemsSource="{Binding Children}">
			<StackPanel Orientation="Horizontal" ContextMenu="{StaticResource TreeViewContextMenuTemplate}">
				<Image Width="16" Height="16" Margin="3,0" Source="../Images/Icons/ic_group_modeltree.png" />
				<TextBlock Text="{Binding Name}" Margin="0,2" />
			</StackPanel>
		</HierarchicalDataTemplate>
		<HierarchicalDataTemplate DataType="{x:Type viewModel:LeafNode}" ItemsSource="{Binding Children}">
			<StackPanel Orientation="Horizontal" ContextMenu="{StaticResource TreeViewContextMenuTemplate}">
				<Image Width="16" Height="16" Margin="3,0" Source="../Images/Icons/ic_leaf_modeltree.png" />
				<TextBlock Text="{Binding Name}" Margin="0,2" />
			</StackPanel>
		</HierarchicalDataTemplate>
	</TreeView.Resources>
</TreeView>
Did I do something wrong? It took ~4 seconds for expanding the node with ~1500 children.
profiler.png
Thank you
 
User avatar
ai_enabled
Posts: 231
Joined: 18 Jul 2013, 05:28
Contact:

Re: Expanding treeview performent

18 May 2017, 07:38

@PhiLong,
If I recall correctly IsVirtualizing is enabled by default for ItemsControl and ListBox, but I cannot be sure about TreeView - I've never tried it
So it makes sense to define IsVirtualizing as well.

Are you sure your Style declaration (targeting {x:Type ItemsControl}) is applied to TreeView? I would try changing it to target {x:Type TreeView} to be sure.

Also you can simply add these properties to the <TreeView> declaration.
IsVirtualizing="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling"
VirtualizingPanel.ScrollUnit="Pixel"
If it still doesn't virtualize (you see no difference in Unity Profiler) we need to wait for a response from the NoesisGUI team. Perhaps this feature is simply not supported yet for HierarchicalDataTemplate.

Regards!
AtomicTorch Studio Pte. Ltd. http://atomictorch.com
 
PhiLong
Topic Author
Posts: 10
Joined: 16 Mar 2017, 04:51

Re: Expanding treeview performent

18 May 2017, 08:30

I tried to set those value to TreeView property directly, but I still didn't see any effect.

anyway, thank you, ai_enabled!
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Expanding treeview performent

18 May 2017, 19:28

To enable virtualization in any ItemsControl there are several properties that need to be correctly set .

- First you need to indicate that ScrollViewer content is able to manage scroll: <ItemsControl ScrollViewer.CanContentScroll="True".../>
- Then you have to use a panel to host items that can virtualize items, that would be a VirtualizingStackPanel.
- Enable virtualization in the VirtualizingStackPanel by setting IsVirtualizing="True" (it is the default value though), and configure the type of virtualization with VirtualizationMode and ScrollUnit properties.

The problem with TreeView is that virtualization only would work for the first level of items, the ones directly added to the TreeView. Sub items cannot be managed by TreeView's ScrollViewer+VirtualizingStackPanel, so when they are expanded all their sub-items create the corresponding containers and are added to the visual tree.

Completely virtualizing a TreeView is something we don't have implemented.
 
PhiLong
Topic Author
Posts: 10
Joined: 16 Mar 2017, 04:51

Re: Expanding treeview performent

19 May 2017, 01:51

Thank you for your explanation.

Do you have any plan to support virtualization on sub-items?
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Expanding treeview performent

22 May 2017, 18:39

Thank you for your explanation.

Do you have any plan to support virtualization on sub-items?
Sorry, but it is not planned to be included soon.
 
User avatar
jsantos
Site Admin
Posts: 3906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Expanding treeview performent

23 May 2017, 01:25

Do you think you could find a workaround for it? (like using a different type of container...)
 
PhiLong
Topic Author
Posts: 10
Joined: 16 Mar 2017, 04:51

Re: Expanding treeview performent

23 May 2017, 04:32

My scenario is loading a hierarchy data from a file and display it into a treeview. And it can be quickly scrolled to a selected node by code (BringIntoView).

The problem is, if the child node has too many items (~1500), it takes a few second to expand and scroll to that node.

Currently, I don't have any idea for a workaround in that situation. Can you give me a bit of advice?

Thank you all,
(sorry about my English)

Who is online

Users browsing this forum: camimamedov, kashif, Semrush [Bot] and 10 guests