Дерево выглядит значительно лучше, если с каждой его ветвью связать растровое изображение (bitmap image). Обычно с деревом ассоциируется список изображений, управляемый объектом класса ImageList (и мы это уже сделали). В общем случае с каждым узлом дерева можно связать два изображения. Одно — для узла в нормальном состоянии, другое — в выбранном. Прежде всего, надо отличать события раскрытия-закрытия узла дерева (Expand-Collapse) от события его выбора (Select). Первое провоцируется нажатием на специальный маркер (со значком + или -), второе — нажатием на текстовую надпись (или растровое изображение). Раскрыть узел можно также и двойным щелчком над именем узла.
Мы уже ввели в состав класса объект treeImages класса ImageList, который должен ссылаться на сформированный список изображений. Немного позже вы создадите изображения дисков и папок и вставите их в список treeImages, а сейчас потренируемся в создании произвольного дерева. Программист должен уметь формировать не только дерево файловой системы, но и любое другое (отделы, заказы, и т.д.). При этом надо уметь связывать растровые изображения с узлами дерева. Покажем, как это делается. Сначала создадим 6 тестовых изображений.
1. В контекстном меню проекта Library выберите команду Add4Add New Item.
2. В появившемся диалоге (окно Categories) найдите узел Resources, а в окне Templates — Bitmap File и нажмите Open.
3. Задайте размеры нового изображения (16, 16), которые соответствуют стандарту для иконок файлового дерева. Проще всего в качестве изображения задать текст в виде цифр (1, 2, . . ,6). Он поможет понять логику управления структурой дерева. Для ввода текста пользуйтесь кнопкой A на Toolbar Image Editor.
4. После создания одного изображения, остальные пять можно скопировать, используя технику drag&drop.
5. Если надо, то переименуйте файлы (клавиша F2) и измените изображения. Для этого поставьте в него фокус, нажмите Delete (для стирания изображения), кнопку А (на Toolbar), текущую цифру, Enter.
6. Нажмите Save All, закройте окна, выделите сразу все файлы изображений и в контекстном меню дайте команду Exclude from Project. Напомню, что нам нужны не отдельные файлы, а список изображений.
7. Теперь добавьте в список treeImages все созданные изображения. Для этого выделите компонент, нажмите кнопку Collection в строке Images окна свойств и, нажимая кнопку Add, поочередно вставьте все изображения.
8. С помощью дизайнера создайте обработчик события Load компонента ExplorerControl и вставьте в него такую строку кода:
tree.Nodes.Add (new TreeNode ("One", 0, 5));
Для того, чтобы убедиться в способности управлять обликом дерева необходимо построить проект и внедрить наш компонент ExplorerControl в форму клиентского приложения Client. Для этого:
1. Дайте команду Rebuild для проекта Library, и перейдите к проекту Client.
2. Сделайте его активным (команда Set as SturtUp Project), переименуйте файл Form1.cs в MainForm.cs,
3. Переименуйте класс Form1 в MainForm (для этого в окне редактора кода используйте Ctrl+H).
4. Перейдите в режим дизайна класса MainForm и задайте размеры его окна (704; 609).
5. В окне Toolbox возьмите элемент типа TabControl и положите его на форму. Задайте ему свойства: Name = tabControl, Dock = Top, Size = (696; 512).
6. В контекстном меню элемента TabControl выберите команду Add Tab.
7. Нажмите кнопку Collection в строке свойства TabPages. Измените свойства новой страницы (TabPage): Text = Explorer, Name = pageExplorer.
8. Не выходя из диалога вставки страниц, нажмите кнопку Add и вставьте еще три страницы со следующими парами (Text, Name) свойств: (SysInfo, pageSysInfo), (Services, pageServices), (Processes, pageProcesses). Закройте диалог.
9. Добавьте компонент ToolTip с именем toolTip.
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.