如何:创建简单或复杂的 TreeView

更新:2007 年 11 月

此示例演示如何创建简单或复杂的 TreeView 控件。

TreeView 由一个层次结构组成,该层次结构中包含多个 TreeViewItem 控件,这些控件可以包含简单的文本字符串,还可以包含更为复杂的内容(如 Button 控件或具有嵌入内容的 StackPanel)。TreeView 内容可以由您显式定义,也可以由数据源提供。本主题提供这些概念的示例。

示例

TreeViewItemHeader 属性包含 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>

下面的示例演示如何 TreeView,其中的 XmlDataProvider 提供 TreeViewItem 内容,HierarchicalDataTemplate 定义该内容的外观。

<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}"/>

下面的示例演示如何创建 TreeView,其中的 TreeViewItem 内容包含具有嵌入内容的 DockPanel 控件。

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

请参见

概念

TreeView 概述

参考

TreeView

TreeViewItem

其他资源

TreeView 帮助主题

TreeView 示例