Обзор элемента управления "TreeView"

Обновлен: Ноябрь 2007

Элемент управления TreeView предоставляет способ для отображения данных в виде иерархической структуры с помощью сворачиваемых узлов. В этом разделе рассматриваются элементы управления TreeView и TreeViewItem и даны простые примеры их использования.

В этом разделе содержатся следующие подразделы.

• Что такое элемент управления "TreeView"?
• Создание элемента управления "TreeView"
• Развертывание и свертывание узлов "TreeViewItem"
• Выбор элемента управления "TreeViewItem"
• Стиль элемента управления "TreeView"
• Добавление изображений и другого содержимого в элементы "TreeView"
• Связанные разделы

Что такое элемент управления "TreeView"?

Элемент управления TreeView — это объект ItemsControl, который выполняет вложение элементов с помощью элементов управления TreeViewItem. В следующем примере создается объект 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 — это объект HeaderedItemsControl, который имеет свойство Header и содержит коллекцию Items.

При определении TreeView с помощью Язык XAML (Extensible Application Markup Language) можно явно определить содержимое Header элемента управления TreeViewItem и элементы, составляющие его коллекцию. На предыдущем рисунке показан этот метод.

Можно также указать ItemsSource в качестве источника данных и затем указать свойства HeaderTemplate и ItemTemplate для определения содержимого TreeViewItem.

Для определения макета элемента управления TreeViewItem можно также использовать объекты HierarchicalDataTemplate. Дополнительные сведения и пример см. в разделе Инструкция по Использованию SelectedValue, SelectedValuePath и SelectedItem.

Если элемент не является элементом управления TreeViewItem, он автоматически включается в элемент управления TreeViewItem при отображении элемента управления TreeView.

Развертывание и свертывание узлов "TreeViewItem"

Если пользователь разворачивает узел TreeViewItem, для свойства IsExpanded устанавливается значение true. Можно также развернуть или свернуть TreeViewItem без участия пользователя, установив для свойства IsExpanded значение true (развернуть) или false (свернуть). При изменении этого свойства создается событие Expanded или Collapsed.

При вызове метода BringIntoView в элементе управления TreeViewItem, TreeViewItem и его родительский элемент управления TreeViewItem разворачиваются. Если элемент управления TreeViewItem скрыт или частично скрыт, элемент управления TreeView прокручивается, чтобы сделать его видимым.

Выбор элемента управления "TreeViewItem"

Когда пользователь щелкает элемент управления TreeViewItem, чтобы его выделить, создается событие Selected, и для свойства IsSelected элемента управления устанавливается значение true. Элемент TreeViewItem также становится свойством SelectedItem элемента управления TreeView. И наоборот, при изменении выбора элемента управления TreeViewItem создается событие Unselected и для свойства IsSelected устанавливается значение false.

Свойство SelectedItem элемента управления TreeView доступно только для чтения; поэтому его нельзя установить явно. Свойство SelectedItem устанавливается, если пользователь щелкает элемент управления TreeViewItem или свойству IsSelected элемента управления TreeViewItem присваивается значение true.

Для установки значения свойству SelectedItem используются свойства SelectedValue и SelectedValuePath. Дополнительные сведения см. в разделе Инструкция по Использованию SelectedValue, SelectedValuePath и SelectedItem.

Можно зарегистрировать обработчик событий для события SelectedItemChanged, чтобы определить, когда изменяется выбранный объект TreeViewItem. Параметр RoutedPropertyChangedEventArgs<T>, который предоставляется обработчику событий, указывает значение OldValue, которое является предыдущим выбором, и значение NewValue, представляющее текущий выбор. Любое из двух значений может быть null, если предыдущий или текущий выбор не выполнен приложением или пользователем.

Стиль элемента управления "TreeView"

По умолчанию стиль элемента управления TreeView помещает его в объект StackPanel, содержащий элемент управления ScrollViewer. При установке свойств Width и Height для элемента управления TreeView эти значения используются для изменения размера объекта StackPanel, отображающего элемент управления TreeView. Если содержимое для отображения больше, чем область отображения, автоматически отображается элемент управления ScrollViewer, чтобы пользователь мог прокручивать содержимое TreeView.

Для настройки внешнего вида элемента управления TreeViewItem установите для свойства Style пользовательский класс Style.

В следующем примере показано, как установить значения свойств Foreground и FontSize для элемента управления TreeViewItem с помощью свойства Style.

<Style TargetType="{x:Type TreeViewItem}">
  <Setter Property="Foreground" Value="Blue"/>
  <Setter Property="FontSize" Value="12"/>
</Style>

Добавление изображений и другого содержимого в элементы "TreeView"

В содержимое Header элемента управления TreeViewItem можно включить несколько объектов. Чтобы включить несколько объектов в содержимое Header, разместите объекты внутри элемента управления макета, такого как Panel или StackPanel.

В следующем примере показано определение свойства Header для элемента управления TreeViewItem в качестве объектов CheckBox и TextBlock, которые включены в элемент управления DockPanel.

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

В следующем примере показано определение объекта DataTemplate, содержащего объекты Image и TextBlock, включенные в элемент управления DockPanel. Чтобы установить свойство HeaderTemplate или ItemTemplate для элемента управления TreeViewItem, можно использовать объект DataTemplate.

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

См. также

Основные понятия

Обзор модели содержимого элементов управления

Ссылки

TreeView

TreeViewItem

Другие ресурсы

Разделы руководства, посвященные элементу управления TreeView

Примеры использования элемента управления TreeView