Обзор TreeView

2025-05-07

Элемент 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 объекты. Дополнительные сведения и пример см. в разделе Use SelectedValue, SelectedValuePath и SelectedItem.

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

Расширение и сворачивание дереваViewItem

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

При вызове метода в BringIntoView элементе управления, 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>