Настройка внешнего вида и поведения серверного веб-элемента управления TreeView
Обновлен: Ноябрь 2007
Отрисовку элемента управления TreeView можно настраивать полностью, что позволяет использовать большой диапазон стилей отображения.
Для настройки внешнего вида и поведения элемента управления TreeView можно выполнить следующие действия.
Задать свойства элемента управления TreeView, которые влияют его отображение и отрисовку.
Присвоить значение свойству ImageSet, которое выбирает набор встроенных изображений для отрисовки элемента управления во время выполнения.
Задать свойства отдельного изображения и стиля, которые управляют отображением и отрисовкой групп объектов TreeNode в элементе управления TreeView control.
Использовать функцию «Автоформат» в Visual Studio для настройки набора свойств изображений и стилей за один раз.
Задать предварительно определенную тему или обложку, определяющую характеристики отображения и отрисовки во время выполнения элементов управления TreeView в приложении.
Свойства макета верхнего уровня
Помимо стандартных свойств элемента управления, таких как свойство BackColor, элемент управления TreeView предоставляет набор свойств, позволяющих точно управлять представлением элемента управления TreeView.
Свойство NodeIndent
Свойство NodeIndent определяет уровень отступа для всех узлов. Отступы для узлов используются с той стороны, с которой отрисовывается элемент управления TreeView. Это левая сторона, для языков, отображение которых происходит слева направо, и правая сторона для языков, отображение которых происходит справа налево.
Свойство NodeWrap
Свойство NodeWrap указывает, переносится ли отображаемый текст в каждом узле в начало следующей строки или отображается на той же строке, если место для текста заканчивается.
Свойство ShowLines
С помощью свойства ShowLines можно указать, отображаются ли линии, соединяющие дочерние узлы с родительскими. Если для этого свойства задано значение true, элемент управления TreeView выполняет поиск изображений линий в веб-папке, указанной свойством LineImagesFolder.
Свойства TreeNodeStyle
Помимо собственных свойств элемент управления TreeView поддерживает свойства элемента управления TreeNodeStyle для всех типов узлов. Эти свойства стиля замещают свойство NodeStyle, применяющееся для всех типов узлов.
В элементе управления TreeView также есть свойство NodeIndent, указывающее уровень отступа для всех узлов. Отступы для узлов используются с той стороны, с которой отрисовывается элемент управления TreeView. Это левая сторона, для языков, отрисовка которых происходит слева направо, и правая сторона для языков, отрисовка которых происходит справа налево.
У узла также может быть другой стиль, если он выбран или если указатель мыши находится над узлом. Если значение свойства Selected узла равно значению true, применяется свойство SelectedNodeStyle, замещающее все невыбранные свойства стиля выбранного узла. Если над узлом проходит указатель мыши, применяется свойство HoverNodeStyle. На следующем рисунке и в следующей таблице описаны свойства TreeNodeStyle.
Свойства TreeNodeStyle
.gif "График стиля узла TreeView")
Свойство узла |
Описание |
|---|---|
Задает вертикальный отступ между всем текущим узлом и его смежными узлами, расположенными выше и ниже. |
|
Задает отступ, который отрисовывается сверху и снизу текста TreeNode. |
|
Задает отступ, который отрисовывается слева и справа от текстаTreeNode. |
|
Задает отступ сверху и снизу от дочерних узлов элемента управления TreeNode. |
|
Задает путь к изображению, отображаемому рядом с элементом управления TreeNode. |
Коллекция разноуровневых стилей
Коллекция LevelStyles — это альтернатива настройке отдельных свойств стиля, например, свойства NodeStyle. Коллекция LevelStyles управляет стилями узлов на отдельных уровнях дерева. Первый стиль в коллекции соответствует стилю узлов на первом уровне дерева. Второй стиль в коллекции соответствует стилю узлов на втором уровне дерева, и т. д. Это свойство чаще всего используется для создания навигационных меню в виде оглавления, где узлы определенного уровня отображаются схожим образом независимо от того, есть ли у них дочерние узлы.
.gif "Примечание") Примечание. |
|---|
Если стиль определенного уровня глубины задан с помощью коллекции LevelStyles, он переопределяет любые параметры стиля корневых, родительских и конечных узлов этого уровня. |
Приоритеты стилей
Свойства стиля применяются в следующем порядке приоритета:
RootNodeStyle, ParentNodeStyle или LeafNodeStyle, в зависимости от типа узла. Если определена коллекция LevelStyles, применяется она. Эта коллекция переопределяет остальные свойства стиля узла.
Автоформат
При использовании средства визуальной разработки, такого как Visual Web Developer, элемент управления TreeView предоставляет функцию «Автоформат». Она позволяет применять к элементу управления набор свойств отображения во время разработки. Эти свойства замещают любые заданные ранее свойства и их можно изменять в конструкторе кода.
В дополнение к стандартным атрибутам стиля «Автоформат» также делает набор изображений свойства ImageSet доступным для включения в элемент управления TreeView. Используя «Автоформат», можно быстро изменять внешний вид элемента управления TreeView таким образом, чтобы имитировать другие известные пользовательские деревья, такие как:
Папка «Входящие» Outlook
Файловая система Microsoft Windows
Список контактов службы MSN Messenger
Список групп новостей Outlook Express
Содержание MSDN
Содержание справки Windows
Часто задаваемые вопросы (ЧЗВ)
Список событий Windows
Кроме стандартных стилей деревьев «Автоформат» включает несколько стилизованных маркированных списков.
«Автоформат» полезен для применения набора свойств к одному элементу управления, а темы и обложки можно использовать для применения одного внешнего вида и поведения к нескольких элементам управления TreeView на веб-узле. Дополнительные сведения см. в разделе Общие сведения о темах и обложках ASP.NET.
Свойства изображения
В отличие от большинства элементов управления, элемент управления TreeView выгодно использует возможность применять набор графических ресурсов. Изображения используются для представления узлов, линий соединения, а также развертывания и свертывания кнопок.
Изображения можно задать на уровне TreeView, присвоив значение свойству ImageSet или создав пользовательские изображения и настроив отдельные свойства изображения. Также можно задать изображения на уровне TreeNode, чтобы настроить внешний вид элемента управления TreeView в дальнейшем.
Наборы изображений
В элемент управления TreeView включены встроенные наборы изображений, аналогичные используемым в стандартных деревьях. В следующей таблице показаны некоторые из стандартных наборов изображений, которые можно использовать.
Имя набора изображения |
Описание |
|---|---|
TreeViewImageSet.Contacts |
Изображения службы MSN Messenger |
TreeViewImageSet.Faq |
Изображения в стиле ЧЗВ |
TreeViewImageSet.Inbox |
Изображения папки «Входящие» Outlook |
TreeViewImageSet.News |
Изображения групп новостей Outlook Express |
TreeViewImageSet.Help |
Изображения системы справки Microsoft Windows |
TreeViewImageSet.XPFileExplorer |
Изображения проводника Microsoft Windows XP |
Пользовательские изображения линии
Помимо встроенных графических ресурсов можно задать собственный набор изображения для элемента управления TreeView. Для использования пользовательского набора изображений необходимо создать два типа изображений. К первому типу относятся изображения узла, отображающие узел, который можно развернуть, узел, который можно свернуть, и узел, который нельзя ни развернуть, ни свернуть. Эти изображения можно создать в программе наподобие Microsoft Paint. Если для соединения узлов используются линии, необходимо создать набор изображений линий и присвоить свойству ShowLines значение true. Если используется визуальный конструктор, такой как Visual Web Developer, для создания изображений линий можно использовать средство Line Image Creator. В противном случае изображения необходимо создать в программе наподобие Microsoft Paint.
После создания изображений узла их следует разместить в каталоге веб-узла, а затем необходимо задать следующие свойства элемента управления TreeView, чтобы указать ссылку на изображения:
Также изображения линий необходимо разместить в папке, а свойство LineImagesFolder должно указывать на эту папку.
Дополнительные сведения о свойстве ImageSet и полный список доступных наборов изображений см. в описании свойства ImageSet.
Дополнительные сведения об изображениях линий и список всех изображений элемента управления TreeView см. в разделе LineImagesFolder.
Темы и обложки
Темы и обложки обеспечивают простой способ применения набора свойств к нескольким элементам управления веб-узла. Например, создается тема MyTheme, и в ней задается обложка MyTreeView. Тогда можно один раз определить эту обложку и применить ее к нескольким элементам управления TreeView.
Дополнительные сведения см. в разделе Общие сведения о темах и обложках ASP.NET.