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

此示例演示如何创建简单或复杂的 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

TreeViewItem

概念

TreeView 概述

其他资源

TreeView 帮助主题