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.

        <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.-->
                  <TextBlock Text="{Binding}"/>
          <!--Set the foreground of the items in the second level
              to Navy.-->
            <Style TargetType="TreeViewItem">
              <Setter Property="Foreground" Value="Navy"/>

      <TreeView Height="200" 
                ItemsSource="{Binding Source={StaticResource dataItems}}"
          <!--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"/>

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();

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

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

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