TreeView 概述

项目
08/18/2008

更新：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) 定义 TreeView，那么可以显式定义 TreeViewItem 控件的 Header 内容以及构成其集合的项。上图演示了此方法。

还可以指定 ItemsSource 作为数据源，然后指定 HeaderTemplate 和 ItemTemplate 以定义 TreeViewItem 内容。

若要定义 TreeViewItem 控件的布局，还可以使用 HierarchicalDataTemplate 对象。有关更多信息及示例，请参见如何：使用 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 属性。

可以使用 SelectedValue 和 SelectedValuePath 属性为 SelectedItem 赋值。有关更多信息，请参见如何：使用 SelectedValue、SelectedValuePath 和 SelectedItem。

可以对 SelectedItemChanged 事件注册事件处理程序，以确定选定的 TreeViewItem 何时发生变化。为事件处理程序提供的 RoutedPropertyChangedEventArgs<T> 指定 OldValue（上一个选择）和 NewValue（当前选择）。如果应用程序或用户未做出上一个选择或当前选择，则这两个值都可能为 null。

TreeView 样式

TreeView 控件的默认样式是将其放在包含 ScrollViewer 控件的 StackPanel 对象内。在为 TreeView 设置 Width 和 Height 属性时，这些值用于确定显示 TreeView 的 StackPanel 对象的大小。如果要显示的内容大于显示区域，将自动显示 ScrollViewer，以便用户能滚动查看 TreeView 内容。

若要自定义 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 定义为 CheckBox 和 TextBlock，二者均包括在 DockPanel 控件中。

<TreeViewItem>
  <TreeViewItem.Header>
    <DockPanel>
      <CheckBox/>
      <TextBlock>
        TreeViewItem Text
      </TextBlock>
    </DockPanel>
  </TreeViewItem.Header>
</TreeViewItem>

下面的示例演示如何定义包含 Image 和 TextBlock 的 DataTemplate，这两个对象均包含在 DockPanel 控件中。可以使用 DataTemplate 为 TreeViewItem 设置 HeaderTemplate 或 ItemTemplate。

<DataTemplate x:Key="NewspaperTVItem">
  <DockPanel>
    <Image Source="images\icon.jpg"/>
    <TextBlock VerticalAlignment="center" Text ="{Binding Path=Name}"/>
  </DockPanel>
</DataTemplate>

请参见

通过