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

Статья
06/02/2023

Элемент управления TreeView предоставляет способ отображения информации в иерархической структуре с помощью узлов, которые можно сворачивать и разворачивать. В данной теме мы рассказываем об элементах управления 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. Дополнительные сведения и пример см. в разделе Использование свойств 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. Подробнее см. в разделе Использование свойств 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>

Поделиться через