Comment : améliorer les performances d'un contrôle TreeView

Mise à jour : Juillet 2008

Lorsqu'un contrôle TreeView contient de nombreux éléments, la durée de son chargement risque de provoquer un ralentissement conséquent dans l'interface utilisateur. Vous pouvez améliorer le temps de chargement en affectant à la propriété jointe VirtualizingStackPanel.IsVirtualizing la valeur true. L'interface utilisateur peut également être lente à réagir lorsqu'un utilisateur fait défiler le contrôle TreeView à l'aide de la roulette de la souris ou en faisant glisser le curseur d'une barre de défilement. Vous pouvez améliorer les performances de TreeView lorsque l'utilisateur effectue un défilement en affectant à la propriété jointe VirtualizingStackPanelVirtualizationMode() la valeur Recycling.

Exemple

Description

L'exemple suivant crée un contrôle TreeView qui affecte à VirtualizingStackPanel.IsVirtualizing la valeur true et à VirtualizingStackPanelVirtualizationMode() la valeur Recycling pour optimiser ses performances.

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>

L'exemple suivant présente les données utilisées dans l'exemple précédent.

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

Voir aussi

Concepts

Optimisation des performances : contrôles

Historique des modifications