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

TreeView Управления обеспечивает способ отображения данных в виде иерархической структуры с использованием свертываемых узлов.The TreeView control provides a way to display information in a hierarchical structure by using collapsible nodes. В этом разделе описываются TreeView и TreeViewItem элементов управления и простые примеры их использования.This topic introduces the TreeView and TreeViewItem controls, and provides simple examples of their use.

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

TreeViewItemsControl , создает вложенные элементы с помощью TreeViewItem элементов управления.TreeView is an ItemsControl that nests the items by using TreeViewItem controls. В следующем примере создается TreeView.The following example creates a 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>

Создание элемента управления TreeViewCreating a TreeView

TreeView Управления содержит иерархию TreeViewItem элементов управления.The TreeView control contains a hierarchy of TreeViewItem controls. Объект TreeViewItem управления HeaderedItemsControl с Header и Items коллекции.A TreeViewItem control is a HeaderedItemsControl that has a Header and an Items collection.

При определении TreeView с помощью Язык XAMLExtensible Application Markup Language (XAML), можно явно определять Header содержимое TreeViewItem элемента управления и элементов, составляющих его коллекции.If you are defining a TreeView by using Язык XAMLExtensible Application Markup Language (XAML), you can explicitly define the Header content of a TreeViewItem control and the items that make up its collection. Этот способ был показан на предыдущем рисунке.The previous illustration demonstrates this method.

Можно также указать ItemsSource как данных источника, а затем укажите HeaderTemplate и ItemTemplate для определения TreeViewItem содержимого.You can also specify an ItemsSource as a data source and then specify a HeaderTemplate and ItemTemplate to define the TreeViewItem content.

Чтобы определить макет TreeViewItem управления, можно также использовать HierarchicalDataTemplate объектов.To define the layout of a TreeViewItem control, you can also use HierarchicalDataTemplate objects. Дополнительные сведения и пример см. в разделе Использование свойств SelectedValue, SelectedValuePath и SelectedItem.For more information and an example, see Use SelectedValue, SelectedValuePath, and SelectedItem.

Если элемент не TreeViewItem управления, он автоматически включается в TreeViewItem управления TreeView отображается элемент управления.If an item is not a TreeViewItem control, it is automatically enclosed by a TreeViewItem control when the TreeView control is displayed.

Развертывание и свертывание элемента TreeViewItemExpanding and Collapsing a TreeViewItem

Если пользователь разворачивает TreeViewItem, IsExpanded свойству true.If the user expands a TreeViewItem, the IsExpanded property is set to true. Можно также развернуть или свернуть TreeViewItem без вмешательства пользователя direct, задав IsExpanded свойства true (развернуть) или false (свернуть).You can also expand or collapse a TreeViewItem without any direct user action by setting the IsExpanded property to true (expand) or false (collapse). При изменении этого свойства, Expanded или Collapsed событием.When this property changes, an Expanded or Collapsed event occurs.

При BringIntoView метод будет вызван на TreeViewItem управления TreeViewItem и его родительским элементом TreeViewItem разверните элементы управления.When the BringIntoView method is called on a TreeViewItem control, the TreeViewItem and its parent TreeViewItem controls expand. Если TreeViewItem не является видимым или частично видимой TreeView прокручивается, чтобы сделать его видимым.If a TreeViewItem is not visible or partially visible, the TreeView scrolls to make it visible.

Выбор элемента TreeViewItemTreeViewItem Selection

Когда пользователь щелкает TreeViewItem управления, чтобы выделить ее, Selected происходит событие и его IsSelected свойству true.When a user clicks a TreeViewItem control to select it, the Selected event occurs, and its IsSelected property is set to true. TreeViewItem Также становится SelectedItem из TreeView элемента управления.The TreeViewItem also becomes the SelectedItem of the TreeView control. И наоборот, при изменении выбора из TreeViewItem управления, его Unselected событием и его IsSelected свойству false.Conversely, when the selection changes from a TreeViewItem control, its Unselected event occurs and its IsSelected property is set to false.

SelectedItem Свойства TreeView элемента управления — это свойство только для чтения; таким образом, нельзя явно задать его.The SelectedItem property on the TreeView control is a read-only property; hence, you cannot explicitly set it. SelectedItem Свойство имеет значение, если пользователь щелкает TreeViewItem управления или когда IsSelected свойству true на TreeViewItem элемента управления.The SelectedItem property is set if the user clicks on a TreeViewItem control or when the IsSelected property is set to true on the TreeViewItem control.

Используйте SelectedValuePath свойство, чтобы указать SelectedValue из SelectedItem.Use the SelectedValuePath property to specify a SelectedValue of a SelectedItem. Подробнее см. в разделе Использование свойств SelectedValue, SelectedValuePath и SelectedItem.For more information, see Use SelectedValue, SelectedValuePath, and SelectedItem.

Можно зарегистрировать обработчик событий на SelectedItemChanged событий, чтобы определить, когда выбранный TreeViewItem изменения.You can register an event handler on the SelectedItemChanged event in order to determine when a selected TreeViewItem changes. RoutedPropertyChangedEventArgs<T> , Предоставляется на событие обработчика указывает OldValue, это выделение предыдущего элемента и NewValue, являющееся текущее выделение.The RoutedPropertyChangedEventArgs<T> that is provided to the event handler specifies the OldValue, which is the previous selection, and the NewValue, which is the current selection. Каждое из этих значений может быть равно null, если ни предыдущий, ни текущий выбор не были сделаны ни пользователем, ни в приложении.Either value can be null if the application or user has not made a previous or current selection.

Стиль элемента управления TreeViewTreeView Style

Стиль по умолчанию для TreeView управления помещает его в StackPanel , содержащий ScrollViewer элемента управления.The default style for a TreeView control places it inside a StackPanel object that contains a ScrollViewer control. При задании Width и Height свойства TreeView, эти значения используются для размера StackPanel объекта, который отображает TreeView.When you set the Width and Height properties for a TreeView, these values are used to size the StackPanel object that displays the TreeView. Если содержимое для отображения больше, чем область отображения ScrollViewer автоматически отображает, чтобы пользователь мог прокручивать TreeView содержимого.If the content to display is larger than the display area, a ScrollViewer automatically displays so that the user can scroll through the TreeView content.

Чтобы настроить внешний вид TreeViewItem установите Style свойства для пользовательского Style.To customize the appearance of a TreeViewItem control, set the Style property to a custom Style.

Следующий пример показывает, как задать Foreground и FontSize значения свойств для TreeViewItem управления с помощью Style.The following example shows how to set the Foreground and FontSize property values for a TreeViewItem control by using a Style.

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

Добавление изображений и другого содержимого в элемент управления TreeViewAdding Images and Other Content to TreeView Items

Можно включить несколько объектов в Header содержимое TreeViewItem.You can include more than one object in the Header content of a TreeViewItem. Чтобы включить несколько объектов в Header содержимое, разместите объекты внутри элемента управления макета, такие как Panel или StackPanel.To include multiple objects in Header content, enclose the objects inside a layout control, such as a Panel or StackPanel.

В следующем примере показан способ определения Header из TreeViewItem как CheckBox и TextBlock , которые включены в DockPanel элемента управления.The following example shows how to define the Header of a TreeViewItem as a CheckBox and TextBlock that are both enclosed in a DockPanel control.

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

В следующем примере показан способ определения DataTemplate , содержащий Image и TextBlock , заключенные в DockPanel элемента управления.The following example shows how to define a DataTemplate that contains an Image and a TextBlock that are enclosed in a DockPanel control. Можно использовать DataTemplate для задания HeaderTemplate или ItemTemplate для TreeViewItem.You can use a DataTemplate to set the HeaderTemplate or ItemTemplate for a TreeViewItem.

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

См. такжеSee Also

TreeView
TreeViewItem
Разделы практического руководстваHow-to Topics
Модель содержимого WPFWPF Content Model