TreeView 概述

项目
05/04/2023

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。

如果使用 Extensible Application Markup Language (XAML) 定义 TreeView，则可以显式定义 TreeViewItem 控件的 Header 内容以及标记其集合的项。上图演示了此方法。

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

要定义 TreeViewItem 控件的布局，还可使用 HierarchicalDataTemplate 对象。有关详细信息和示例，请参阅使用 SelectedValue、SelectedValuePath 和 SelectedItem。

如果某个项不是 TreeViewItem 控件，当显示 TreeView 控件时，该项自动包含在 TreeViewItem 控件中。

展开和折叠 TreeViewItem

如果用户展开 TreeViewItem，则 IsExpanded 属性将设置为 true。还可以通过将 IsExpanded 属性设置为 true（展开）或 TreeViewItem（折叠）来展开或折叠 false，而无需任何直接的用户操作。当此属性发生更改时，会发生 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 属性。

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