TreeView UI Virtualization is not working

Question

I got roughly about 127K of TreeViewItems and I need to make UI Virtualization working.

My XAML:

<TreeView ScrollViewer.CanContentScroll="True" ItemsSource="{Binding}" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling" Visibility="Hidden" Name="treeView" Margin="10,10,10,0" VerticalAlignment="Top" Grid.Column="0" SelectedItemChanged="treeView_SelectedItemChanged" BorderThickness="0"/>

And My C#:

            treeView.Visibility = Visibility.Visible;
            articleIndexer = OpDb.Articles;
            int count = articleIndexer.GetCount();
            //if (count > 1000)
             //   count = 1000;
            IEnumerable<TBase3.Article> articles = articleIndexer.GetArticles(0, count);
            List<TreeViewItem> items = new List<TreeViewItem>();
            foreach (var article in articles)
            {
                TreeViewItem item1 = new TreeViewItem();
                item1.Header = article.Name;
                item1.Tag = new DbInfo() { RelatedId = article.BlockIndex, DbId = article.Database.Id, IsArticle = true };
                items.Add(item1);
                //treeView.Items.Add(items);
            }
            Items = items;
            treeView.DataContext = Items;

articles count is over 127K and after forearch loop is done it does view my TreeViewItems. But my GUI goes TILT and I need to end process to shutdown application. So I'm guessing my Virtualization is not working because GUI is not responding. Items is IList

Why are you generating TreeViewItem manually. Simply bind the collection with TreeView and treeView internally creates TreeViewItem for you. Since you already have created containers (TreeVieItem) how will virtualization get a chance to play its part? — Rohit Vats

Jawahar Jawahar · Accepted Answer · 2014-08-05T10:47:00

Virtualizing will only work with Data Binding. Though you are doing Binding here, you are still creating TreeViewItems in your view model. That is wrong. TreeView should decide how many TreeViewItem, it needs to generate. So instead of creating TreeViewItems in your viewmodel, create a model class to represent the tree node. And bind the collection of that model class.

        var list = new List<TreeModel>();

        for (int i = 0; i < 10000; i++)
        {
            var treeModel = new TreeModel();
            treeModel.Header = "Node 1";
            list.Add(treeModel);
        }

        MyTreeView.ItemsSource = list;

TreeView UI Virtualization is not working

1 Answers