在虚拟化TreeView中滚动问题

Question

Today I decided to finally try virtualized TreeView. To do that binding is required. So I decided to get 2 things test - HierarchicalDataTemplate based on types + virtualization.

I created a base class for some data. Created 2 derived classes from base class. Made 2 HierarchicalDataTemplate (1 for each derived class) to get different formatting of nodes. And running population of 10k nodes of 2 types.

public class ListItem_Generic
{
    public string Name { get; protected set; }
    public ListItem_Generic(string Name = "") { this.Name = Name; }
}

public class ListItem_Single : ListItem_Generic
{
    public ListItem_Single(string Name = "") : base(Name) { }
}

public class ListItem_Multi : ListItem_Generic
{
    public List<ListItem_Generic> Items { get; protected set; }
    public ListItem_Multi(string Name = "", List<ListItem_Generic> Items = null)
        : base(Name)
    {
        if (Items == null) 
            this.Items = new List<ListItem_Generic>(); 
        else 
            this.Items = new List<ListItem_Generic>(Items);
    }
}

    public MainWindow()
    {
        InitializeComponent();

        // Create a list of sample items and populate them
        var lst = new List<ListItem_Generic>();

        int MaxHeaders = 10000;
        var rnd = new Random();
        // Now generate 10 000 records. First select random amount of headers
        int HeadersCount = rnd.Next(MaxHeaders);

        for (int i = 0; i < HeadersCount; i++)
        {
            var Childrencount = rnd.Next(100);
            var children = new List<ListItem_Generic>();
            for (int j = 0; j < Childrencount; j++)
                children.Add(new ListItem_Single("Child #"+j+" of parent #"+i));
            lst.Add(new ListItem_Multi("Header #" + i + " (" + Childrencount + ")", children));
        }
        for (int i = 0; i < MaxHeaders - HeadersCount; i++)
            lst.Add(new ListItem_Single("Line #" + i));

        // Bind lstView to lst
        lstView.ItemsSource = lst;
        lstView.UpdateLayout();
    }

<Window x:Class="Test_DataTemplates.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:Test_DataTemplates"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TreeView Name="lstView" VirtualizingPanel.IsVirtualizing="True">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type loc:ListItem_Multi}" ItemsSource="{Binding Path=Items}">
                    <Border Background="RosyBrown">
                        <TextBlock Text="{Binding Path=Name}" Foreground="White" FontWeight="Bold"/>
                    </Border>
                </HierarchicalDataTemplate>
                <HierarchicalDataTemplate DataType="{x:Type loc:ListItem_Single}">
                    <TextBlock Text="{Binding Path=Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

Everything works finely:

• treeview gets virtualized (easily noticeable by memory footprint + loading times)
• Nodes derived from types are correctly formatted

Yet, when scrolling to let's say header #1000 and expanding it - scroll position would jump to some other place making expanded node and its children NOT visible.

What did I do wrong? Is there any way to fix this?

Removing virtualization also removes scrolling bug.

Answer 1

After having many issues with Tree virtualization in C# WPF (including major issue, that only the very first level gets virtualized) - I was not able to find a proper fix. Microsoft accepted a bug report and answered, that scrolling issue will get fixed in one of future releases.

As to the final solution to this for me personally - I've switched to own implementation of ListTreeView, ie using List and simulating tree. This solved all the issues with virtualization and with scrolling behavior. The only issue was - removal of many items after collapsing tree node. I had to implement a check if it's easier/faster to just recreate a fresh list instead of deleting items 1 by 1.

Answer 2

Try turning off (not on) Recycling

VirtualizingStackPanel.VirtualizationMode="Standard"

The optimization article refers to turning it on

How to: Improve the Performance of a TreeView

Answer 3

I'd appreciate if some1 could just test this in their environment and confirm the issue. Also, playing around a little bit found another strange behavior:

• changed mode to Standart
• implemented IsExpanded two-way binding (not sure if this is required at all)

Next run the program:

• Expand header with some big number, like 1000 - scroller jumps to some other place

Rerun the program (for purity of experiment)

• Expand one of first headers, like #2.
• Expand header with some big number, like 1000 - scroller stays at proper location...

Expanding one of first nodes look to be a workaround.

Answer 4

I found a solution on MSDN. Apparently it has something to do with the default TreeView template. The following fixes the scroll bar flickering and stops random nodes from expanding when scrolling rapidly.

<Style x:Key="{x:Type TreeView}" TargetType="{x:Type TreeView}">
    <Setter Property="TreeView.Background" Value="Transparent"/>
    <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
    <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling"/>
    <Setter Property="TreeView.SnapsToDevicePixels" Value="True" />
    <Setter Property="TreeView.OverridesDefaultStyle" Value="True" />
    <Setter Property="ItemsControl.ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="TreeView.Template">
        <Setter.Value>
            <ControlTemplate TargetType="TreeView">
                <ScrollViewer Focusable="False" CanContentScroll="True" Padding="4">
                    <ItemsPresenter HorizontalAlignment="Stretch"/>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I tried rapidly scrolling and didn't seem to notice an issue anymore. The awesome thing is you don't even have to do away with your virtualization.

Answer 5

As per https://msdn.microsoft.com/en-us/library/system.windows.controls.scrollunit(v=vs.110).aspx (ScrollUnit Enumeration), there are two possible values. The default seems to be 'Pixel', which causes the scrolling issues. Switching to 'Item' as shown below resolves the issue:

VirtualizingStackPanel.ScrollUnit="Item"