방법: TreeView의 성능 개선

업데이트: 2008년 7월

TreeView에 항목이 여러 개 포함되어 있으면 로드하는 데 소요되는 시간 때문에 사용자 인터페이스가 크게 지연될 수 있습니다. VirtualizingStackPanel.IsVirtualizing 연결된 속성을 true로 설정하면 로드 시간을 단축할 수 있습니다. 사용자가 마우스 휠을 사용하거나 스크롤 막대의 엄지 단추를 끌어 TreeView를 스크롤하는 경우에도 UI 반응 속도가 느릴 수 있습니다. VirtualizingStackPanelVirtualizationMode() 연결된 속성을 Recycling으로 설정하면 사용자가 스크롤할 때의 TreeView 성능을 높일 수 있습니다.

예제

설명

다음 예제에서는 VirtualizingStackPanel.IsVirtualizing을 true로 설정하고 VirtualizingStackPanelVirtualizationMode()를 Recycling으로 설정하여 성능을 최적화하는 TreeView를 만듭니다.

코드

<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>

다음 예제에서는 이전 예제에서 사용한 데이터를 보여 줍니다.

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

참고 항목

개념

성능 최적화: 컨트롤

변경 기록