Древовидное представление

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

На следующем изображении представлен пример элемента управления TreeView с вложенными контролами TreeViewItem.

Что такое 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), вы можете явно определить Header содержимое TreeViewItem элемента управления и элементы, составляющие его коллекцию. На предыдущем рисунке показан этот метод.

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

Чтобы определить макет TreeViewItem элемента управления, можно также использовать HierarchicalDataTemplate объекты. Дополнительные сведения и пример см. в разделе Use 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 установлено на true на элементе управления TreeViewItem.

Используйте свойство SelectedValuePath, чтобы задать SelectedValue для SelectedItem. Дополнительные сведения см. в разделе Use 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. Вы можете использовать DataTemplate для задания HeaderTemplate или ItemTemplate для TreeViewItem.

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

Стандартные задачи

В следующей таблице перечислены распространенные задачи для работы с элементом управления TreeView:

Название	Description
Создание простых или сложных представлений TreeView	Узнайте, как создавать элементы управления TreeView с различными структурами.
Используйте SelectedValue, SelectedValuePath и SelectedItem	Узнайте, как работать со свойствами выбора в TreeView.
Привязка объекта TreeView к данным с неопределенной глубиной	Узнайте, как привязать TreeView к иерархическим данным с неизвестной глубиной.
Повышение производительности объекта TreeView	Узнайте, как оптимизировать производительность TreeView.
Найдите TreeViewItem в TreeView	Узнайте, как найти определенный объект TreeViewItem в TreeView.

Связанные разделы

Общие сведения о привязке данных

Шаблоны данных: Общие сведения

Справка

TreeView TreeViewItem

Стили и шаблоны

Вы можете изменить значение по умолчанию ControlTemplate , чтобы предоставить TreeView элементу управления уникальный внешний вид. Дополнительные сведения см. в статье "Что такое стили и шаблоны?", а также как создать шаблон для элемента управления.

Комплектующие

Элемент TreeView управления не содержит именованных частей.

При создании ControlTemplate для TreeView, ваш шаблон может содержать ItemsPresenter внутри ScrollViewer. (Отображает ItemsPresenter каждый элемент в TreeView; ScrollViewer включает прокрутку в элементе управления). Если элемент ItemsPresenter не является прямым дочерним элементом ScrollViewer, необходимо дать элементу ItemsPresenter имя ItemsPresenter.

Визуальные состояния

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

Имя VisualState	Имя VisualStateGroup	Description
Действительный	ValidationStates	Элемент управления использует класс Validation, а связываемое свойство Validation.HasError - это false.
НедействительныйФокус	ValidationStates	Присоединенное свойство Validation.HasError, и элемент управления имеет true фокус.
НедействительныйНефокусированный	ValidationStates	Присоединенное Validation.HasError свойство имеет true значение, и элемент управления не имеет фокуса.

Части TreeViewItem

В следующей TreeViewItem таблице перечислены именованные части элемента управления.

Часть	Тип	Description
PART_Header	FrameworkElement	Визуальный элемент, содержащий содержимое заголовка TreeView элемента управления.

Состояния TreeViewItem

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

Имя VisualState	Имя VisualStateGroup	Description
Обычная	CommonStates	Состояние по умолчанию.
Наведение курсора	CommonStates	Указатель мыши расположен над TreeViewItem.
Disabled	CommonStates	TreeViewItem отключено.
Focused	FocusStates	Элемент TreeViewItem в фокусе.
Нецеленаправленных	FocusStates	TreeViewItem не сфокусирован.
Expanded	СостоянияРасширения	Элемент управления TreeViewItem развернут.
Обрушился	СостоянияРасширения	Элемент TreeViewItem управления свернут.
HasItems (имеет элементы)	HasItemsStates	У TreeViewItem есть элементы.
Нет элементов	HasItemsStates	У TreeViewItem нет элементов.
Выбрано	SelectionStates	Выбрано TreeViewItem значение.
ВыбраноНеактивно	SelectionStates	Выбран TreeViewItem, но не активен.
Не выбрано	SelectionStates	TreeViewItem не выбрано.
Действительный	ValidationStates	Элемент управления использует класс Validation, а связываемое свойство Validation.HasError - это false.
НедействительныйФокус	ValidationStates	Присоединенное свойство Validation.HasErrortrue определяет, имеет ли элемент управления фокус.
НедействительныйНефокусированный	ValidationStates	Прикрепленное свойство Validation.HasError связано с элементом управления true, который не имеет фокуса.

Связанные разделы

Общие сведения о привязке данныхОбщие сведения о шаблонах данных