TreeView 개요

아티클
05/04/2023

TreeView 컨트롤은 축소 가능한 노드를 사용하여 계층 구조로 정보를 표시하는 방법을 제공합니다. 이 항목에서는 TreeView 및 TreeViewItem 컨트롤을 소개하고 간단한 사용 예를 제공합니다.

TreeView란?

TreeView는 TreeViewItem 컨트롤을 사용하여 항목을 중첩하는 ItemsControl입니다. 다음 예제에서는 TreeView합니다.

<TreeView Name="myTreeViewEvent" >
  <TreeViewItem Header="Employee1" IsSelected="True">
    <TreeViewItem Header="Jesper Aaberg"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="12345"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Monday"/>
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Thursday"/>
    </TreeViewItem>
  </TreeViewItem>
  <TreeViewItem Header="Employee2">
    <TreeViewItem Header="Dominik Paiha"/>
    <TreeViewItem Header="Employee Number">
      <TreeViewItem Header="98765"/>
    </TreeViewItem>
    <TreeViewItem Header="Work Days">
      <TreeViewItem Header="Tuesday"/>
      <TreeViewItem Header="Wednesday"/>
      <TreeViewItem Header="Friday"/>
    </TreeViewItem>
  </TreeViewItem>
</TreeView>

TreeView 만들기

TreeView 컨트롤에는 TreeViewItem 컨트롤의 계층 구조가 포함됩니다. TreeViewItem 컨트롤은 Header 및 Items 컬렉션이 있는 HeaderedItemsControl입니다.

XAML(Extensible Application Markup Language)을 사용하여 TreeView를 정의하는 경우 TreeViewItem 컨트롤의 Header 콘텐츠와 해당 컬렉션을 구성하는 항목을 명시적으로 정의할 수 있습니다. 위의 그림에서는 이 메서드를 보여 줍니다.

ItemsSource를 데이터 소스로 지정한 다음, HeaderTemplate 및 ItemTemplate을 지정하여 TreeViewItem 콘텐츠를 정의할 수도 있습니다.

TreeViewItem 컨트롤의 레이아웃을 정의하기 위해 HierarchicalDataTemplate 개체를 사용할 수도 있습니다. 자세한 내용 및 예제는 SelectedValue, SelectedValuePath 및 SelectedItem 사용을 참조하세요.

항목이 TreeViewItem 컨트롤이 아니면 TreeView 컨트롤이 표시될 때 자동으로 TreeViewItem 컨트롤로 묶입니다.

TreeViewItem 확장 및 축소

사용자가 TreeViewItem을 확장하면 IsExpanded 속성이 true로 설정됩니다. IsExpanded 속성을 true(확장) 또는 false(축소)로 설정하면 직접적인 사용자 작업 없이 TreeViewItem을 확장하거나 축소할 수도 있습니다. 이 속성이 변경되면 Expanded 또는 Collapsed 이벤트가 발생합니다.

BringIntoView 메서드가 TreeViewItem 컨트롤에서 호출되면 TreeViewItem 및 부모 TreeViewItem 컨트롤이 확장됩니다. TreeViewItem이 표시되지 않거나 부분적으로 표시되면 TreeView가 스크롤되어 표시합니다.

TreeViewItem 선택

사용자가 TreeViewItem 컨트롤을 클릭하여 선택하면 Selected 이벤트가 발생하고 IsSelected 속성이 true로 설정됩니다. TreeViewItem은 또한 TreeView 컨트롤의 SelectedItem이 됩니다. 반대로 TreeViewItem 컨트롤에서 선택 항목이 변경되면 Unselected 이벤트가 발생하고 IsSelected 속성이 false로 설정됩니다.

TreeView 컨트롤의 SelectedItem 속성은 읽기 전용 속성입니다. 따라서 명시적으로 설정할 수 없습니다. SelectedItem 속성은 사용자가 TreeViewItem 컨트롤을 클릭하거나 TreeViewItem 컨트롤에서 IsSelected 속성이 true로 설정되면 설정됩니다.

SelectedValuePath 속성을 사용하여 SelectedItem의 SelectedValue를 지정합니다. 자세한 내용은 SelectedValue, SelectedValuePath 및 SelectedItem 사용을 참조하세요.

선택한 TreeViewItem이 변경되는 시기를 확인하려면 SelectedItemChanged 이벤트에 이벤트 처리기를 등록할 수 있습니다. 이벤트 처리기에 제공되는 RoutedPropertyChangedEventArgs<T>는 이전 선택인 OldValue와 현재 선택인 NewValue를 지정합니다. 애플리케이션 또는 사용자가 이전 또는 현재에 선택한 항목이 없는 경우 두 값은 null이 될 수 있습니다.

TreeView 스타일

TreeView 컨트롤의 기본 스타일은 ScrollViewer 컨트롤을 포함하는 StackPanel 개체 내에 해당 컨트롤을 배치합니다. TreeView에 대해 Width 및 Height 속성을 설정하면 이러한 값은 TreeView를 표시하는 StackPanel 개체의 크기를 조정하는 데 사용됩니다. 표시할 콘텐츠가 표시 영역보다 큰 경우 ScrollViewer가 자동으로 표시되어 사용자가 TreeView 콘텐츠를 스크롤할 수 있습니다.

TreeViewItem 컨트롤의 모양을 사용자 지정하려면 Style 속성을 사용자 지정 Style로 설정합니다.

다음 예제에서는 Style을 사용하여 TreeViewItem 컨트롤에 대한 Foreground 및 FontSize 속성 값을 설정하는 방법을 보여줍니다.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

TreeView 항목에 이미지 및 기타 콘텐츠 추가

TreeViewItem의 Header 콘텐츠에 둘 이상의 개체를 포함할 수 있습니다. Header 콘텐츠에 여러 개체를 포함하려면 Panel 또는 StackPanel과 같은 레이아웃 컨트롤 안에 개체를 묶습니다.

다음 예제에서는 TreeViewItem의 Header를 DockPanel 컨트롤에 묶인 CheckBox 및 TextBlock으로 정의하는 방법을 보여줍니다.

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

다음 예제에서는 DockPanel 컨트롤에 묶인 Image 및 TextBlock을 포함하는 DataTemplate을 정의하는 방법을 보여줍니다. DataTemplate을 사용하여 TreeViewItem에 대해 HeaderTemplate 또는 ItemTemplate을 설정할 수 있습니다.

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>