TreeView 개요
업데이트: 2007년 11월
TreeView 컨트롤은 축소 가능한 노드를 사용하여 계층 구조로 정보를 표시할 수 있는 방법을 제공합니다. 이 항목에서는 TreeView 및 TreeViewItem 컨트롤에 대해 소개하고 컨트롤 사용 방법을 보여 주는 간단한 예제를 제공합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
- TreeView 정의
- TreeView 만들기
- TreeViewItem 확장 및 축소
- TreeViewItem 선택
- TreeView 스타일
- TreeView 항목에 이미지 및 다른 내용 추가
- 관련 항목
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의 내용을 정의할 수도 있습니다.
HierarchicalDataTemplate 개체를 사용하여 TreeViewItem 컨트롤의 레이아웃을 정의할 수도 있습니다. 자세한 내용과 예제는 방법: SelectedValue, SelectedValuePath 및 SelectedItem 사용을 참조하십시오.
항목이 TreeViewItem 컨트롤이 아닌 경우에도 TreeView 컨트롤이 표시될 때 자동으로 TreeViewItem 컨트롤 안에 포함됩니다.
TreeViewItem 확장 및 축소
사용자가 TreeViewItem을 확장하면 IsExpanded 속성이 true로 설정됩니다. 사용자가 직접 확장하거나 축소하지 않아도 IsExpanded 속성을 true(확장) 또는 false(축소)로 설정하여 TreeViewItem을 확장하거나 축소할 수 있습니다. 이 속성이 변경되면 Expanded 또는 Collapsed 이벤트가 발생합니다.
TreeViewItem 컨트롤에 대해 BringIntoView 메서드가 호출되면 TreeViewItem과 해당 부모 TreeViewItem 컨트롤이 확장됩니다. TreeViewItem이 표시되지 않거나 일부만 표시되는 경우 이를 표시할 수 있도록 TreeView가 스크롤됩니다.
TreeViewItem 선택
사용자가 TreeViewItem 컨트롤을 클릭하여 선택하면 Selected 이벤트가 발생하고 컨트롤의 IsSelected 속성이 true로 설정됩니다. TreeViewItem도 TreeView 컨트롤의 SelectedItem이 됩니다. 이와는 반대로 TreeViewItem 컨트롤에서 다른 컨트롤로 선택이 변경되면 Unselected 이벤트가 발생하고 컨트롤의 IsSelected 속성이 false로 설정됩니다.
TreeView 컨트롤의 SelectedItem 속성은 읽기 전용 속성이므로 명시적으로 설정할 수 없습니다. 사용자가 TreeViewItem 컨트롤을 클릭하거나 TreeViewItem 컨트롤의 IsSelected 속성이 true로 설정되어 있는 경우 SelectedItem 속성이 설정됩니다.
SelectedItem에 값을 할당하려면 SelectedValue 및 SelectedValuePath 속성을 사용합니다. 자세한 내용은 방법: SelectedValue, SelectedValuePath 및 SelectedItem 사용을 참조하십시오.
SelectedItemChanged 이벤트에서 이벤트 처리기를 등록하면 선택된 TreeViewItem의 변경 여부를 파악할 수 있습니다. 이벤트 처리기에 제공된 RoutedPropertyChangedEventArgs<T>가 이전 선택에 해당하는 OldValue와 현재 선택에 해당하는 NewValue를 지정합니다. 응용 프로그램이나 사용자가 이전에 선택한 내용 또는 현재 선택한 내용이 없는 경우 두 값 중 하나가 null이 될 수 있습니다.
TreeView 스타일
TreeView 컨트롤의 기본 스타일은 ScrollViewer 컨트롤이 있는 StackPanel 개체 내에 컨트롤을 배치하는 것입니다. TreeView에 Width 및 Height 속성을 설정한 경우 이 값에 따라 TreeView가 표시되는 StackPanel 개체의 크기가 결정됩니다. 표시할 내용이 표시 영역보다 큰 경우에는 사용자가 TreeView의 내용을 스크롤할 수 있도록 ScrollViewer가 자동으로 표시됩니다.
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>
다음 예제에서는 Image 및 TextBlock이 DockPanel 컨트롤에 포함된 DataTemplate을 정의하는 방법을 보여 줍니다. TreeViewItem의 HeaderTemplate 또는 ItemTemplate을 설정하는 데 DataTemplate을 사용할 수 있습니다.
<DataTemplate x:Key="NewspaperTVItem">
<DockPanel>
<Image Source="images\icon.jpg"/>
<TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
</DockPanel>
</DataTemplate>