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 VirtualizationMode.Recycling.

Example

Description

The following example creates a TreeView that sets the VirtualizingStackPanel.IsVirtualizing attached property to true and the VirtualizingStackPanel.VirtualizationMode attached property to VirtualizationMode.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
 {
 level2Items ??= new ObservableCollection<string>();
 return level2Items;
 }
 }

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

Public Class TreeViewData
 Inherits ObservableCollection(Of ItemsForTreeView)

 Public Sub New()
 For i As Integer = 0 To 99
 Dim item As New ItemsForTreeView()
 item.TopLevelName = "item " & i.ToString()
 Add(item)
 Next
 End Sub
End Class


Public Class ItemsForTreeView
 Private _TopLevelName As String
 Public Property TopLevelName() As String
 Get
 Return _TopLevelName
 End Get
 Set(ByVal value As String)
 _TopLevelName = value
 End Set
 End Property
 Private level2Items As ObservableCollection(Of String)

 Public ReadOnly Property SecondLevelItems() As ObservableCollection(Of String)
 Get
 If level2Items Is Nothing Then
 level2Items = New ObservableCollection(Of String)()
 End If
 Return level2Items
 End Get
 End Property

 Public Sub New()
 For i As Integer = 0 To 9
 SecondLevelItems.Add("Second Level " & i.ToString())
 Next
 End Sub
End Class

See also

• Controls