How to: Improve the Performance of a TreeView

 

If a TreeView contains many items, the amount of time it takes to load may cause a significant delay in the user interface. You can improve the load time by setting the VirtualizingStackPanel.IsVirtualizing attached property to true. The UI might also be slow to react when a user scrolls the TreeView by using the mouse wheel or dragging the thumb of a scrollbar. You can improve the performance of the TreeView when the user scrolls by setting the VirtualizingStackPanel.VirtualizationMode attached property to Recycling.

The following example creates a TreeView that sets VirtualizingStackPanel.IsVirtualizing to true and VirtualizingStackPanel.VirtualizationMode to Recycling to optimize its performance.

    <StackPanel>
      <StackPanel.Resources>
        <src:TreeViewData x:Key="dataItems"/>


        <HierarchicalDataTemplate DataType="{x:Type src:ItemsForTreeView}"
                                  ItemsSource="{Binding Path=SecondLevelItems}">

          <!--Display the TopLevelName property in the first level.-->
          <TextBlock Text="{Binding Path=TopLevelName}"/>
          
          <!--Display each string in the SecondLevelItems property in
              the second level.-->
          <HierarchicalDataTemplate.ItemTemplate>
              <DataTemplate>
                  <TextBlock Text="{Binding}"/>
              </DataTemplate>
          </HierarchicalDataTemplate.ItemTemplate>
          
          <!--Set the foreground of the items in the second level
              to Navy.-->
          <HierarchicalDataTemplate.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
              <Setter Property="Foreground" Value="Navy"/>
            </Style>
          </HierarchicalDataTemplate.ItemContainerStyle>  
        </HierarchicalDataTemplate>
      </StackPanel.Resources>

      <TreeView Height="200" 
                ItemsSource="{Binding Source={StaticResource dataItems}}"
                VirtualizingStackPanel.IsVirtualizing="True"
                VirtualizingStackPanel.VirtualizationMode="Recycling">
        <TreeView.ItemContainerStyle>
          
          <!--Expand each TreeViewItem in the first level and 
              set its foreground to Green.-->
          <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Foreground" Value="Green"/>
          </Style>
        </TreeView.ItemContainerStyle>
      </TreeView>
    </StackPanel>

The following example shows the data that the previous example uses.

    public class TreeViewData : ObservableCollection<ItemsForTreeView>
    {

        public TreeViewData()
        {
            for (int i = 0; i < 100; ++i)
            {
                ItemsForTreeView item = new ItemsForTreeView();
                item.TopLevelName = "item " + i.ToString();
                Add(item);
            }
        }
    }
    

    public class ItemsForTreeView
    {
        public string TopLevelName { get; set; }
        private ObservableCollection<string> level2Items;

        public ObservableCollection<string> SecondLevelItems
        {
            get 
            {
                if (level2Items == null)
                {
                    level2Items = new ObservableCollection<string>();
                }
                return level2Items;
            }
        }

        public ItemsForTreeView()
        {
            for (int i = 0; i < 10; ++i)
            {
                SecondLevelItems.Add("Second Level " + i.ToString());
            }
        }
    }

Controls

Show: