다음을 통해 공유

방법: 간단하거나 복잡한 TreeView 만들기

  • 아티클

이 예제에서는 단순하거나 복잡한 TreeView 컨트롤을 만드는 방법을 보여 줍니다.

TreeView는 단순한 텍스트 문자열과 Button 컨트롤 또는 내장된 콘텐츠가 있는 StackPanel과 같이 더 복잡한 콘텐츠를 포함할 수 있는 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 xmlns="">
      <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>

참고 항목