Компонент ListView (из Windows Forms) предназначен для вывода текстовых данных. Создавая столбцы в нем, нельзя выбирать тип данных (например, изображения). Тем не менее способ вывода изображений в элемент управления ListView существует. Рассмотрим его на примере.
Построение интерфейса программы с компонентом ListView
Создадим новый Windows Forms-проект в Visual Studio на языке C#. Поместим на форму элемент управления ListView.
Добавим в ListView три столбца (с помощью пункта быстрого меню «ListView Задачи» под названием «Изменить столбцы…») с заголовками «Изображение», «Имя» и «Фамилия» (за название столбца отвечает параметр Text).
Также изменим параметр ListView «Представление» на значение «Details» — таким образом созданные столбцы будут отображаться на ListView.
В итоге получим следующий готовый интерфейс с ListView:
Также следует отметить, что в папке bin/Debug проекта был создан каталог с названием images и в него было помещено два изображения с именами «1.jpg» и «2.jpg».
Написание кода программы, выводящей изображения в ListView
Создадим метод LoadData(), в теле которого будем производить вывод данных (в том числе картинок) в ListView. Ниже представлен его код с подробными комментариями.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// метод выводит данные в listView1 private void LoadData() { // очищаем listView1 listView1.Items.Clear(); // создаем список изображений для строк listView1 ImageList imageList = new ImageList(); // устанавливаем размер изображений imageList.ImageSize = new Size(30, 30); // заполняем список изображениями imageList.Images.Add(new Bitmap("images/1.jpg")); imageList.Images.Add(new Bitmap("images/2.jpg")); // создадим пустое изображение (просто белая заливка) Bitmap emptyImage = new Bitmap(30, 30); // получим объект Graphics для редактирования изображения using (Graphics gr = Graphics.FromImage(emptyImage)) { // выполним заливку изображения emptyImage белым цветом gr.Clear(Color.White); } // и добавим его в список imageList.Images.Add(emptyImage); // устанавливаем в listView1 список изображений imageList listView1.SmallImageList = imageList; // массив имен, которые будем выводить в listView1 string[] firstNames = { "Иван", "Николай", "Егор" }; // массив фамилий, которые будем выводить в listView1 string[] lastNames = { "Иванов", "Николаев", "Егоров" }; // добавляем строки в listView1 for (int i = 0; i < firstNames.Length; i++) { // создадим объект ListViewItem (строку) для listView1 ListViewItem listViewItem = new ListViewItem(new string[] { "", firstNames[i], lastNames[i] }); // индекс изображения из imageList для данной строки listViewItem listViewItem.ImageIndex = i; // добавляем созданный элемент listViewItem (строку) в listView1 listView1.Items.Add(listViewItem); } } |
Отметим, что очищать listView1 в начале метода здесь нет необходимости. Мы поместили данное выражение потому, что в реальных программах обычно производить очистку требуется — потому что вызов метода загрузки данных может производиться несколько раз (после каждого изменения набора данных).
Создание «пустого» изображения emptyImage (залитого белым цветом) сделано на случай отсутствия изображения у какой-либо строки данных в ListView. Добавление null в список ImageList возможно, но ListView работать с null не может и выдаст ошибку. Поэтому при отсутствии изображения можно (как и показано в примере) вывести «пустую» белую картинку.
Заметим также, что рядом с изображением можно выводить текст. Для этого замените пустую строку «» при создании ListViewItem на нужный текст.
Поместим вызов метода LoadData() в конструктор класса формы Form1. Таким образом данные будут загружаться при запуске программы.
|
1 2 3 4 5 6 7 |
public Form1() { InitializeComponent(); // выведем данные в listView1 LoadData(); } |
Запустим программу.
Видеоурок на тему вывода изображений в ListView
Поделиться в соц. сетях: