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.
Description
The following example creates a TreeView that sets VirtualizingStackPanel.IsVirtualizing to true and VirtualizingStackPanel.VirtualizationMode to Recycling to optimize its performance.
Code
<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()); } } }
