Question

It’s been too long since my last question so here is a new one !

I’m having performance issues with a Virtualizing WPF TreeView during scrolling. Let’s say I have arbitrary complex controls under my TreeViewItems that can take a long time – let’s say 10ms – to be measured. Scrolling down the TreeView can quickly become very laggy, as the Layout pass is called for each scroll unit down.

What would be your ideas to get a smooth scrolling in this case ?
I tried two different approaches but I’m having issues with both.

First one was to buffer the last MeasureOverride result and use it instead of calling MeasureOverride again unless size changed. It’s working as long as I have only one hierarchy level in the tree. But as soon as I get more, some items are not rendered (although the size is correctly reserved). Invalidating the buffer will not be an issue.

Second one was to replace ControlTemplate of controls under treeViewItems during scroll thanks to a Trigger, using a ControlTemplate very quick to render. Sadly, I’m getting strange exceptions when I stop scrolling regargind items already attached in the logical tree.

Finally, I’m not in a multithreading environment and thus won’t be able to use asynchronous bindings. 🙁

Here is a very small example of the Tree I’d like to improve (It’s the one implementing my first idea), I just put a Thread.Sleep(10) in the MeasureOverride of a ContentControl used to render my Items.

public class Item
{
    public string Index { get; set; }
    public Item Parent { get; set; }

    public IEnumerable<Item> Items
    {
        get
        {
            if (Parent == null)
            {
                for (int i = 0; i < 10; i++)
                {
                    yield return new Item() { Parent = this, Index = this.Index + "." + i.ToString() };
                }
            }
        }
    }
}

public class HeavyControl : ContentControl
{
    protected override Size MeasureOverride(Size constraint)
    {
        Thread.Sleep(10);
        return base.MeasureOverride(constraint);
    }
}

/// <summary>
/// Logique d'interaction pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    public IEnumerable<Item> Items
    {
        get
        {
            for (int i = 0; i < 20; i++)
            {
                yield return new Item() { Index = i.ToString() };
            }
        }
    }
}

public class MyTreeView : TreeView
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new MyTreeViewItem();
    }
}

public class MyTreeViewItem : TreeViewItem
{
    static MyTreeViewItem()
    {
        MyTreeViewItem.IsExpandedProperty.OverrideMetadata(typeof(MyTreeViewItem), new FrameworkPropertyMetadata(true));
    }

    public Size LastMeasure
    {
        get { return (Size)GetValue(LastMeasureProperty); }
        set { SetValue(LastMeasureProperty, value); }
    }

    // Using a DependencyProperty as the backing store for LastMeasure.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty LastMeasureProperty =
        DependencyProperty.Register("LastMeasure", typeof(Size), typeof(MyTreeViewItem), new UIPropertyMetadata(default(Size)));

    protected override Size MeasureOverride(Size constraint)
    {
        if (LastMeasure != default(Size))
        {
            if (this.VisualChildrenCount > 0)
            {
                UIElement visualChild = (UIElement)this.GetVisualChild(0);
                if (visualChild != null)
                {
                    visualChild.Measure(constraint);
                }
            }

            return LastMeasure;
        }
        else
        {
            LastMeasure = base.MeasureOverride(constraint);
            return LastMeasure;
        }
    }

    protected override DependencyObject GetContainerForItemOverride()
    {
        return new MyTreeViewItem();
    }
}

MainWindow.xaml

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <HierarchicalDataTemplate DataType="{x:Type local:Item}" ItemsSource="{Binding Items}">
        <local:HeavyControl>
            <TextBlock FontSize="20" FontWeight="Bold" Text="{Binding Index}" />
        </local:HeavyControl>
    </HierarchicalDataTemplate>
</Window.Resources>

<local:MyTreeView x:Name="treeView" VirtualizingStackPanel.IsVirtualizing="True" ItemsSource="{Binding Items}" />

</Window>

Answer 1

I would try to fix the error(s) in your second approach.

• Give each node/item of the tree a unique key
• Have dictionary that holds the control(s) in each node/item
• While scrolling (or even while not in focus, just have a text/simple representation of the data in the tree.
• Once a node/item is focused replace the simple representation with the proper control(s) from the dictionary using the unique key.
• When I node/item loses focus revert it back to a simple representation, as the changes are still stored in the dictionary’s value referencing the control(s)