방법: 간단하거나 복잡한 TreeView 만들기
업데이트: 2007년 11월
이 예제에서는 간단하거나 복잡한 TreeView 컨트롤을 만드는 방법을 보여 줍니다.
TreeView는 간단한 텍스트 문자열과, 포함된 내용이 있는 StackPanel 컨트롤 또는 Button 컨트롤 등의 보다 복잡한 내용을 포함할 수 있는 TreeViewItem 컨트롤의 계층으로 구성됩니다. TreeView의 내용을 명시적으로 정의할 수도 있고 데이터 소스에서 내용을 제공하도록 설정할 수도 있습니다. 이 항목에서는 예제를 통해 이러한 개념에 대해 설명합니다.
예제
TreeViewItem의 Header 속성에는 TreeView가 해당 항목에 대해 표시하는 내용이 포함됩니다. 또한 TreeViewItem은 TreeViewItem 컨트롤을 자식 요소로 포함할 수 있으며 이러한 자식 요소는 Items 속성을 사용하여 정의할 수 있습니다.
다음 예제에서는 Header 속성을 텍스트 문자열로 설정하여 TreeViewItem의 내용을 명시적으로 정의하는 방법을 보여 줍니다.
<TreeView>
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
</TreeView>
다음 예제에서는 Button 컨트롤로 Items를 정의하여 TreeViewItem의 자식 요소를 정의하는 방법을 보여 줍니다.
<TreeView>
<TreeViewItem Header ="Employee1">
<TreeViewItem.Items>
<Button>Jesper</Button>
<Button>Aaberg</Button>
<Button>12345</Button>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem.Items>
<Button>Dominik</Button>
<Button>Paiha</Button>
<Button>98765</Button>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>
다음 예제에서는 XmlDataProvider로 TreeViewItem 내용을 지정하고 HierarchicalDataTemplate으로 내용의 모양을 정의하여 TreeView를 만드는 방법을 보여 줍니다.
<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
<x:XData>
<EmployeeData >
<EmployeeInfo>
<EmployeeInfoData>Employee1</EmployeeInfoData>
<Item Type="FirstName">Jesper</Item>
<Item Type="LastName">Aaberg</Item>
<Item Type="EmployeeNumber">12345</Item>
</EmployeeInfo>
<EmployeeInfo>
<EmployeeInfoData>Employee2</EmployeeInfoData>
<Item Type="FirstName">Dominik</Item>
<Item Type="LastName">Paiha</Item>
<Item Type="EmployeeNumber">98765</Item>
</EmployeeInfo>
</EmployeeData>
</x:XData>
</XmlDataProvider>
<HierarchicalDataTemplate DataType="EmployeeInfo"
ItemsSource ="{Binding XPath=Item}">
<TextBlock Text="{Binding XPath=EmployeeInfoData}" />
</HierarchicalDataTemplate>
<TreeView ItemsSource="{Binding Source={StaticResource myEmployeeData},
XPath=EmployeeInfo}"/>
다음 예제에서는 포함된 내용이 있는 DockPanel 컨트롤을 TreeViewItem 내용에 포함하여 TreeView를 만드는 방법을 보여 줍니다.
<TreeView>
<TreeViewItem Header="Animals">
<TreeViewItem.Items>
<DockPanel>
<Image Source="data\fish.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Fish</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\dog.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Dog</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\cat.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Cat</TextBlock>
</DockPanel>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>