Содержание
Элементы управления TreeView часто применяются для размещения больших объемов данных. Объясняется это тем, что TreeView обладает сворачиваемо-разворачиваемой структурой. Даже в случае прокрутки TreeView пользователем сверху донизу, видимой не обязательно будет вся доступная в нем информация. Информация, не являющаяся видимой, может вообще пропускаться в элементе управления TreeView, сокращая накладные расходы (и время, необходимое для его заполнения). Даже еще лучше то, что при открытии элемента TreeViewItem инициируется событие Expanded, а при закрытии — событие Collapsed. Этот момент очень удобно использовать для добавления недостающих узлов или удаления тех, что уже больше не нужны. Такой подход называется оперативным .
Оперативное создание узлов может применяться в приложениях, в которых данные извлекаются из базы, но классическим примером, несомненно, является приложение, предназначенное для просмотра каталогов. В настоящее время большинство жестких дисков имеют огромную емкость и постоянно разрастающуюся структуру каталогов.
Хотя элемент управления TreeView и можно заполнить структурой каталогов жесткого диска, этот процесс является удручающе медленным. Гораздо лучше, когда сначала отображается частично свернутое представление, и пользователю предлагается самостоятельно добираться до конкретных каталогов. При разворачивании каждого узла в дерево добавляются соответствующие подкаталоги, и протекает этот процесс практически мгновенно:
В применении элемента управления TreeView с возможностью оперативного создания узлов для отображения папок на жестком диске нет ничего нового. Первый шаг заключается в добавлении в TreeView списка дисков при первой загрузке окна. Изначально узел для каждого диска представляется в свернутом виде. Буква диска отображается в заголовке, а объект DriveInfo хранится в свойстве TreeViewItem.Tag для упрощения поиска вложенных каталогов в дальнейшем без воссоздания этого объекта. (Это увеличивает накладные расходы приложения, связанные с памятью, но при этом сокращает количество проверок безопасности доступа к файлам. Общий эффект является незначительным, но зато немного улучшает производительность и упрощает код.) Ниже приведен код, в котором TreeView заполняется списком дисков с помощью класса System.IO.DriveInfo:
Данный код добавляет под узлом каждого диска указатель места заполнения (строку со звездочкой). Этот указатель не отображается, поскольку узел сначала находится в свернутом состоянии. При разворачивании узла этот указатель можно удалить и добавить на его месте список подкаталогов.
Указатель места заполнения представляет собой удобный инструмент, который можно использовать для определения того, развернул ли уже пользователь данную папку для просмотра ее содержимого. Однако его главной обязанностью является отображение рядом с каждым элементом специального значка, указывающего на возможность разворачивания. Без него пользователь просто не сможет разворачивать каталог и отображать содержащиеся в нем подпапки. Если в каталоге нет никаких подпапок, этот значок будет просто исчезать при попытке пользователя развернуть его, что похоже на поведение проводника Windows при просмотре сетевых папок.
Для реализации оперативного создания узлов необходимо обрабатывать событие TreeViewItem.Expanded. Поскольку это событие поддерживает пузырьковое распространение, обработчик событий можно присоединять прямо к элементу TreeView, чтобы он обрабатывал событие Expanded любого находящегося внутри него элемента TreeViewItem:
В настоящее время приведенный код осуществляет обновление при каждом разворачивании элемента. При желании можно сделать так, чтобы обновление выполнялось только при первом разворачивании элемента и обнаружении указателя места заполнения. Это сократит объем работы, который должно будет выполнять приложение, но при этом также увеличит вероятность отображения устаревшей информации.
В качестве альтернативы можно сделать так, чтобы обновление выполнялось при каждом выборе элемента, за счет обработки события ViewItem.Selected, или применить компонент вроде System.IO.FileSystemWatcher для ожидания уведомлений от операционной системы при добавлении, удалении или переименовании папки. Компонент FileSystemWatcher является единственным способом гарантировать, что обновление дерева каталогов будет осуществляться сразу же при появлении изменения, но чреват наибольшими накладными расходами.
Комбинируя с TreeView мощные возможности шаблонов элементов управления, можно добиться много чего. Например, можно создавать элементы управления, радикально отличающиеся как по внешнему виду, так и по поведению, просто заменяя шаблоны для элементов управления TreeView и TreeViewItem.
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?
TreeView — ItemsControl , создает вложенные элементы с помощью TreeViewItem элементов управления. TreeView is an ItemsControl that nests the items by using TreeViewItem controls. В следующем примере создается TreeView. The following example creates a TreeView.
Создание элемента управления TreeView Creating 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 с помощью Язык XAML Extensible Application Markup Language (XAML) , можно явно определить Header содержимое TreeViewItem управления и элементы, входящие в коллекцию. If you are defining a TreeView by using Язык XAML Extensible 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.
Развертывание и свертывание элемента TreeViewItem Expanding and Collapsing a TreeViewItem
Если пользователь разворачивает TreeViewItem, IsExpanded свойству true . If the user expands a TreeViewItem, the IsExpanded property is set to true . Можно также развернуть или свернуть TreeViewItem без непосредственного участия пользователя, задав 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.
Выбор элемента TreeViewItem TreeViewItem 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.
Вы можете зарегистрировать обработчик событий на SelectedItemChanged событий, чтобы определить, когда выбранный TreeViewItem изменения. You can register an event handler on the SelectedItemChanged event in order to determine when a selected TreeViewItem changes. RoutedPropertyChangedEventArgs , Предоставляемый событию указывает обработчик OldValue, являющийся предыдущему выделению и NewValue, который является текущее выделение. The RoutedPropertyChangedEventArgs 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.
Стиль элемента управления TreeView TreeView 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.
Добавление изображений и другого содержимого в элемент управления TreeView Adding 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.
В следующем примере показано определение 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.
Как мы говорили в предыдущей статье, WPF TreeView можно использовать очень простым способом, добавляя к нему объекты TreeViewItem, либо в Отделенный код или объявив их прямо в XAML. Очень легко начать, как можно видеть из примера ниже:
Мы просто объявляем объекты TreeViewItem непосредственно в XAML, в той порядке, в которой мы хотим их увидеть, где первый тег является дочерним элементом TreeView, а его дочерние объекты также вложены в их родительские объекты. Чтобы указать текст, который мы хотим отобразить для каждого элемента, мы используем свойство Header. По умолчанию TreeViewItem не раскрывается, но чтобы показать структуру примера, используем свойство IsExpanded, чтобы раскрыть два родительских элемента.
TreeViewItem с изображениями и другими элементами управления
Header — интересное свойство. Как видите, я могу просто указать текст, а затем визуализировать ее напрямую, не ничего больше не делая, это удобно в — WPF — он оборачивает текст внутри элемента управления TextBlock, вместо вас. Это показывает нам, что мы можем добавить практически все, что хотим, в свойство Header вместо строки, а затем визуализировать его в TreeView — отличный пример того, почему так легко настроить внешний вид элементов управления WPF.
Одним из распространенных запросов от людей, приходящих из WinForms или даже из других UI библиотек, является возможность показать изображение рядом с текстовой меткой элемента TreeView. Это очень легко сделать с WinForms, потому что TreeView построен именно для этого сценария. С WPF TreeView это немного сложнее, но вы получите гораздо больше гибкости, чем с WinForms TreeView. Вот пример:
Я сделал здесь много элементов, просто чтобы показать вам, какую гибкость вы можете получить: я раскрасил дочерние элементы и добавил изображения и даже кнопки к родительским элементам. Поскольку мы все определяем с помощью простой разметки, вы можете делать практически все, но, как вы можете видеть из примера, это имеет свою цену: огромные количества кода XAML для дерева всего с шестью элементами!
Подведем итоги
Хотя вполне возможно определить весь TreeView, просто используя разметку, как мы это сделали в приведенных примерах выше, в большинстве случаев это не лучший метод, и хотя вы могли бы сделать это в Отделенном коде (Code-behind), это привело бы к избыточному количеству строк кода. Лучшим решением является привязка данных, о нем мы поговорим в следующих главах.