Пошаговое руководство. Создание интерфейса в стиле проводника с использованием элементов управления ListView и TreeView с помощью конструктора Walkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer

Одним из преимуществ Visual Studio является возможность создания профессионально оформленных Windows Forms приложений в течение короткого промежутка времени. One of the benefits of Visual Studio is the ability to create professional-looking Windows Forms applications in a short of amount of time. Распространенным сценарием является создание пользовательского интерфейса с ListView TreeView элементами управления и, которые похожи на проводник Windows в операционных системах Windows. A common scenario is creating a user interface (UI) with ListView and TreeView controls that resembles the Windows Explorer feature of Windows operating systems. Проводник Windows отображает иерархическую структуру файлов и папок на компьютере пользователя. Windows Explorer displays a hierarchical structure of the files and folders on a user’s computer.

Создание формы, содержащей элемент управления ListView и TreeView To create the form containing a ListView and TreeView control

В меню Файл укажите Создать, затем нажмите Проект. On the File menu, point to New, and then click Project.

В диалоговом окне Новый проект сделайте следующее: In the New Project dialog box, do the following:

В категории выберите либо Visual Basic , либо Visual C#. In the categories, choose either Visual Basic or Visual C#.

В списке шаблонов выберите Windows Forms приложение. In the list of templates, choose Windows Forms Application.

Нажмите кнопку ОК. Click OK. Будет создан новый проект Windows Forms. A new Windows Forms project is created.

Добавьте в SplitContainer форму элемент управления и задайте для его Dock свойства значение Fill . Add a SplitContainer control to the form and set its Dock property to Fill.

Добавьте ImageList именованный элемент imageList1 в форму и используйте окно свойств, чтобы добавить два изображения: изображение папки и изображение документа в указанном порядке. Add an ImageList named imageList1 to the form and use the Properties window to add two images: a folder image and a document image, in that order.

Добавьте TreeView элемент управления с именем treeview1 в форму и разместите его в левой части SplitContainer элемента управления. Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. В окно свойств treeView1 выполните следующие действия. In the Properties window for treeView1 do the following:

Задайте для свойства Dock значение Fill. Set the Dock property to Fill.

Задайте свойству ImageList значение imagelist1. Set the ImageList property to imagelist1.

Добавьте ListView элемент управления с именем listView1 в форму и разместите его в правой части SplitContainer элемента управления. Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. В окно свойств listview1 выполните следующие действия. In the Properties window for listview1 do the following:

Установите свойство Dock в значение Fill. Set the Dock property to Fill.

Установите свойство View в значение Details. Set the View property to Details.

Откройте редактор коллекции Колумнхеадер, нажав кнопку с многоточием ( ) в Columns свойстве . Open the ColumnHeader Collection Editor by clicking the ellipses ( ) in the Columns property . Добавьте три столбца и задайте Text для них свойства Name , Type и Last Modified соответственно. Add three columns and set their Text property to Name , Type , and Last Modified , respectively. Нажмите кнопку ОК , чтобы закрыть диалоговое окно. Click OK to close the dialog box.

Задайте свойству SmallImageList значение imageList1. Set the SmallImageList property to imageList1.

Реализуйте код, чтобы заполнить TreeView узлы и подузлы. Implement the code to populate the TreeView with nodes and subnodes. Добавьте этот код в Form1 класс. Add this code to the Form1 class.

Поскольку в предыдущем коде используется пространство имен System.IO, добавьте соответствующий оператор using или Import в верхней части формы. Since the previous code uses the System.IO namespace, add the appropriate using or import statement at the top of the form.

Вызовите метод Set-up из предыдущего шага в конструкторе формы или Load методе обработки событий. Call the set-up method from the previous step in the form’s constructor or Load event-handling method. Добавьте этот код в конструктор формы. Add this code to the form constructor.

Обработайте NodeMouseClick событие для treeview1 и реализуйте код , который заполняется listview1 содержимым узла при щелчке узла. Handle the NodeMouseClick event for treeview1 , and implement the code to populate listview1 with a node’s contents when a node is clicked. Добавьте этот код в Form1 класс. Add this code to the Form1 class.

Если вы используете C#, убедитесь, что у вас есть NodeMouseClick событие, связанное с методом обработки событий. If you are using C#, make sure you have the NodeMouseClick event associated with its event-handling method. Добавьте этот код в конструктор формы. Add this code to the form constructor.

Тестирование приложения Testing the Application

Теперь можно проверить форму, чтобы убедиться, что она ведет себя так, как ожидалось. You can now test the form to make sure it behaves as expected.

Тестирование формы To test the form

Нажмите клавишу F5 для запуска приложения. Press F5 to run the application.

Вы увидите разделенную форму TreeView , содержащую элемент управления, который отображает каталог проекта слева, и ListView элемент управления с правой стороны с тремя столбцами. You will see a split form containing a TreeView control that displays your project directory on the left side, and a ListView control on the right side with three columns. Можно просмотреть, TreeView выбрав узлы каталога, и ListView заполнится содержимым выбранного каталога. You can traverse the TreeView by selecting directory nodes, and the ListView is populated with the contents of the selected directory.

Next Steps Next Steps

Это приложение предоставляет пример того, как можно использовать TreeView ListView вместе элементы управления и. This application gives you an example of a way you can use TreeView and ListView controls together. Дополнительные сведения об этих элементах управления см. в следующих разделах: For more information on these controls, see the following topics:

Общие сведения об элементе управления ListView (Windows Forms) ListView Control Overview (Windows Forms)

Элемент управления ListView Windows Forms отображает список элементов со значками. The Windows Forms ListView control displays a list of items with icons. Представление списка можно использовать для создания пользовательского интерфейса, аналогичного правой области окна проводника. You can use a list view to create a user interface like the right pane of Windows Explorer. Элемент управления имеет четыре режима представления: LargeIcon, маленькие значки, List и Details. The control has four view modes: LargeIcon, SmallIcon, List, and Details.

Что можно сделать с помощью элемента управления ListView What You Can Do with the ListView Control

Дополнительный режим просмотра, плитка, доступен только в Windows XP и операционной системе Windows Server 2003. An additional view mode, Tile, is only available on Windows XP and the Windows Server 2003 operating system. Дополнительные сведения см. в разделе инструкции. Включение мозаичного представления в Windows Forms элементе управления ListView. For more information, see How to: Enable Tile View in a Windows Forms ListView Control.

В режиме LargeIcon рядом с текстом элемента отображаются крупные значки. элементы отображаются в нескольких столбцах, если элемент управления достаточно большой. The LargeIcon mode displays large icons next to the item text; the items appear in multiple columns if the control is large enough. Режим маленькие значки одинаковый, за исключением того, что он отображает небольшие значки. The SmallIcon mode is the same except that it displays small icons. Режим списка отображает небольшие значки, но всегда находится в одном столбце. The List mode displays small icons but is always in a single column. В режиме подробностей отображаются элементы в нескольких столбцах. The Details mode displays items in multiple columns. Дополнительные сведения см. в разделе инструкции. Добавление столбцов в Windows Forms элемент управления ListView. For details, see How to: Add Columns to the Windows Forms ListView Control. Режим просмотра определяется View свойством. The view mode is determined by the View property. Все режимы просмотра могут отображать изображения из списков изображений. All of the view modes can display images from image lists. Дополнительные сведения см. в разделе как отображать значки для элемента управления ListView Windows Forms. For details, see How to: Display Icons for the Windows Forms ListView Control.

В следующей таблице перечислены некоторые ListView элементы и представления, которые они являются допустимыми. The following table lists some of the ListView members and the views they are valid in.

Элемент ListView ListView member	Просмотр View
СвойствоAlignment Alignment property	SmallIcon либо LargeIcon SmallIcon or LargeIcon
СвойствоAutoArrange AutoArrange property	SmallIcon либо LargeIcon SmallIcon or LargeIcon
Метод AutoResizeColumn AutoResizeColumn method	Details
СвойствоColumns Columns property	Details либо Tile Details or Tile
СобытиеDrawSubItem DrawSubItem event	Details
Метод FindItemWithText FindItemWithText method	Details, Listили Tile Details, List, or Tile
Метод FindNearestItem FindNearestItem method	SmallIcon либо LargeIcon SmallIcon or LargeIcon
Метод GetItemAt GetItemAt method	Details либо Tile Details or Tile
СвойствоGroups Groups property	Все представления, Кроме List All views except List
СвойствоHeaderStyle HeaderStyle property	Details. Details.
СвойствоInsertionMark InsertionMark property	LargeIcon, SmallIconили Tile LargeIcon, SmallIcon, or Tile

Ключевым свойством ListView элемента управления является Items , который содержит элементы, отображаемые элементом управления. The key property of the ListView control is Items, which contains the items displayed by the control. SelectedItemsСвойство содержит коллекцию элементов, выбранных в данный момент в элементе управления. The SelectedItems property contains a collection of the items currently selected in the control. Пользователь может выбрать несколько элементов, например, чтобы перетащить несколько элементов за раз в другой элемент управления, если MultiSelect свойство имеет значение true . The user can select multiple items, for example to drag and drop several items at a time to another control, if the MultiSelect property is set to true . ListViewЭлемент управления может отображать флажки рядом с элементами, если CheckBoxes свойство имеет значение true . The ListView control can display check boxes next to the items, if the CheckBoxes property is set to true .

ActivationСвойство определяет тип действия, которое пользователь должен предпринять для активации элемента в списке: Standard , OneClick и TwoClick . The Activation property determines what type of action the user must take to activate an item in the list: the options are Standard, OneClick, and TwoClick. OneClick для активации элемента требуется одно нажатие кнопки. OneClick activation requires a single click to activate the item. TwoClick Активация требует, чтобы пользователь дважды щелкнул элемент, чтобы активировать его. один щелчок изменяет цвет текста элемента. TwoClick activation requires the user to double-click to activate the item; a single click changes the color of the item text. Standard Активация требует, чтобы пользователь дважды щелкнул, чтобы активировать элемент, но элемент не изменит внешний вид. Standard activation requires the user to double-click to activate an item, but the item does not change appearance.

ListViewЭлемент управления также поддерживает стили оформления и другие возможности, доступные на платформе Windows XP, включая группирование, мозаичное представление и метки вставки. The ListView control also supports the visual styles and other features available on the Windows XP platform, including grouping, tile view, and insertion marks.

ListView с редактируемыми ячейками

Данный пост написан по мотивам статьи с codeproject “ListView in-line editing”.

Суть вопроса в том, что иногда возникает необходимость править данные в ячейках элемента ListView, который настроен на табличное представление (свойство View выставлено в Details). Как вы знаете напрямую это сделать нельзя, потому что ячейки эти реализованы как Read Only.

Исходный код доступен на GitHub.

В этом случае нам поможет TextBox. Как использовать данную методику я покажу на примере. В нашем распоряжении будет таблица с двумя столбцами Address и Value. При этом редактируемой может быть только ячейка в столбце Value. Таблица реализована при помощи элемента ListView и называется lvTable.

Идея подхода следующая: на форму мы поместим TextBox элемент (tbCell), он будет подставляться на место ячейки, данные который мы ходим изменить. Изменение осуществляется двойным щелчком левой кнопки мыши по соответствующей ячейке, после этого информация из нее будет скопирована в tbCell, доступный для редактирования. Для сохранения данных нужно нажать Enter или убрать фокус с элемента.

Далее предлагаю описание реализации в виде последовательности действий. Исходный код проекта прилагается к статье.

Шаг 1

На форме располагаем все необходимые элементы: ListView, TextBox, и настраиваем их.

Свойство	Значение
BorderStyle	None
FullRowSelect	True
Name	lvTable
Dock	Fill
View	Details

Добавим два столбца (Address и Value) на ListView, для этого нужно щелкнуть по значению свойства Columns и в появившемся окне сделать необходимые правки.

Свойство	Значение
Name	tbCell
Dock	Fill

Форма будет выглядеть примерно так, как показано ниже.

Шаг 2

Добавим загрузку демо данных на форму, для этого создадим обработчик события Load для формы и назовем его Form1_Load. После этого добавим в него код, заполняющий таблицу данными.

Добавим обработчики событий для наших элементов.

Событие	Значение
MouseDoubleClick	lvTable_MouseDoubleClick

Событие	Значение
Leave	tbCell_Leave
KeyPress	tbCell_KeyPress

Шаг 3

Добавим в обработчики событий код, который позволяет “редактировать” ячейки таблицы.

Создадим три глобальных переменных.

CancelEdit – переменная, являющаяся флагом, через который передается разрешение на изменение данных ячейки.

CurrentItem – текущая запись таблицы.

CurrentSubItem – поле редактируемой записи.

Заполним кодом обработчики событий.

В своем проекте, на этом этапе, вам будет необходимо внести в обработчики событий свои коррективы: проверка вводимых данных и т.п.
На этом все, спасибо!