TreeView 概述

项目
01/30/2025

TreeView 控件提供了一种使用可折叠节点在分层结构中显示信息的方法。本主题介绍 TreeView 和 TreeViewItem 控件，并提供其用法的简单示例。

什么是 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 控件，或者将 IsSelected 属性在 TreeViewItem 控件上设置为 true，则会设置 SelectedItem 属性。

使用 SelectedValuePath 属性指定 SelectedItem 的 SelectedValue。有关详细信息，请参阅使用 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（这两者都包含在 DockPanel 控件中）的 DataTemplate。可以使用 DataTemplate 设置 TreeViewItem 的 HeaderTemplate 或 ItemTemplate。

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

通过