expanded issue in virtualized treeview

나래 정 1 Reputation point
2021-06-22T01:24:41.337+00:00

I decided to use UI virtualization, because there are a lot of items in the treeview.
But there are some problems.

  1. When I expand a node with 1000 child nodes, the UI does not display normally.
  2. And it has scrolling issues: not smooth scrolling, and sometimes program abnormal terminated.

107914-%E1%84%8F%E1%85%A2%E1%86%B8%E1%84%8E%E1%85%A5.png

xaml

    <TreeView Grid.Column="2" Grid.Row="2" Visibility="Visible"  ItemsSource="{Binding Children}" VirtualizingStackPanel.IsVirtualizing="True" >  
        <TreeView.Resources>  
            <HierarchicalDataTemplate DataType="{x:Type vm:TreeItemViewModel}" ItemsSource="{Binding Children}">  
                <StackPanel Orientation="Horizontal" Margin="2">  
                    <Border Background="YellowGreen" CornerRadius="3" Width="16" Height="16" SnapsToDevicePixels="True" />  
                    <TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center" Padding="4,0,2,0"/>  
                </StackPanel>  
            </HierarchicalDataTemplate>  

            <HierarchicalDataTemplate DataType="{x:Type vm:ColorItemViewModel}" ItemsSource="{Binding Children}">  
                <StackPanel Orientation="Horizontal" Margin="2">  
                    <TextBlock Text="Colour:" Margin="1,0,0,0"/>  
                    <TextBlock  
							Text="{Binding DisplayName}"  
							Background="{Binding BackgroundBrush}"  
							Foreground="{Binding ForegroundBrush}"  
							Padding="3,0"  
							Margin="6,0,0,0"/>  
                </StackPanel>  
            </HierarchicalDataTemplate>  
        </TreeView.Resources>  

        <TreeView.ItemContainerStyle>  
            <Style TargetType="{x:Type TreeViewItem}">  
                <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />  
                <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>  
                <Setter Property="IsEnabled" Value="{Binding IsEnabled, Mode=TwoWay}"/>  
            </Style>  
        </TreeView.ItemContainerStyle>  
    </TreeView>  

cs

    /// <summary>  
    /// Gets/sets whether the TreeViewItem   
    /// associated with this object is expanded.  
    /// </summary>  
    public bool IsExpanded  
    {  
        get { return isExpanded; }  
        set  
        {  
            if (value != isExpanded)  
            {  
                isExpanded = value;  
                OnPropertyChanged("IsExpanded");  

                // Expand all the way up to the root.  
                if (isExpanded && parent != null)  
                    parent.IsExpanded = true;  

                // Lazy load the child items, if necessary.  
                if (isExpanded && HasDummyChild)  
                {  
                    Children.Remove(DummyChild);  
                    LoadChildren();  
                }  
            }  
        }  
    }  

    /// <summary>  
    /// Invoked when the child items need to be loaded on demand.  
    /// Subclasses can override this to populate the Children collection.  
    /// </summary>  
    protected virtual void LoadChildren()  
    {  
        for (int i = 0; i < 5000; i++)  
        {  
            Children.Add(new TreeItemViewModel(this, true) { DisplayName = "subnode " + i });  
        }  
    }  

When a node is expanded, 1000 sub-nodes are added(Lazy load).
How can I solve these problems?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,771 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
809 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.