Создание списков (ListView). Поиск и фильтрация данных

Продолжим разработку настольного приложения и поговорим об альтернативном DataGrid’у элементе, который может отображать информацию из базы данных — ListView. Как правило, он представляет собой стандартный список. Однако при желании вы можете сделать сложную компоновку объекта, которую не получилось бы реализовать с помощью DataGrid. Также можно вывести элементы не только построчно, но и, например, плитками, реализовать поиск и фильтрацию информации.

Вывод информации о турах с ListView

Для вывода информации о турах добавляем новую страницу с ListView
Переходим на нее сразу после инициализации компонентов MainWindow

Подготавливаем разметку грида — это две строки

Добавляем элемент ListView, размечаем в гриде и задаем имя

Для вывода информации о туре создается шаблон элемента в списке — то представление, которое должно отображаться для каждого элемента

Создаем шаблон и размечаем его грид, указав при этом размер строк

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

Добавляем изображение тура в верстку, установив необходимые атрибуты

Теперь задаем объекты для привязки, а также изображение, если изображения тура не будет

Добавляем текстовые поля для наименования, указав: перенос текста, выравнивание, большой шрифт; для стоимости, указав: выравнивание, также большой шрифт, но делаем текст жирным; количество билетов — выравниваем по правому краю; и актуальности — выравниваем по левому краю

Добавляем привязки для наименования, стоимости, количества билетов и актуальности

Загружаем коллекцию «список» в коде

Далее — Далее — Финиш. 252 строки было импортировано. Можем их увидеть в таблице

В чем у нас ошибка? Мы не загрузили туры в список — наш ListView

Запускаем приложение еще раз

Работаем над форматом отображения стоимости и количества билетов. Указываем им StringFormat формат для указания цены (два знака после запятой) и примечание к количеству билетов. Делать это можно прямо во время запуска приложения

Для отображения актуальности делаем дополнительное свойство в классе Тур — назовем его ActualText

Выполняем привязку

Теперь изменяем представление ListView на плитку. У нас в качестве ItemsPanel будет находиться RowPanel, который позволяет нам переносить элементы в виде плиток. И не забываем убрать горизонтальную прокрутку в ListView

Как говорилось ранее, для работы с большими объемами информации полезно реализовать поиск и фильтрацию. Как это работает? Пользователь вводит в специальные элементы управления данные для поиска или выбирает категории из списка для фильтрации. Затем в коде разработчик приводит коллекцию данных к виду, который соответствует поиску, и загружает результаты в ListView. Давайте сделаем это.

Для начала необходимо подготовить внешний вид страницы. Добавляем элементы для поиска и фильтрации. Для поиска это будет TextBox, для фильтрации — ComboBox, который представляет собой выпадающий список объектов. Обязательно даем подсказки, чтобы пользователь знал, что именно вводить. И устанавливаем атрибуты, например, на выравнивание и размеры. Также указываем, какое поле отображать для ComboBox, и добавляем Checkbox для отображения только актуальных туров. Делать это мы будем также в RowPanel, чтобы переносить элементы при изменениях размера экрана

В плане удобства использования наиболее выигрышно выглядит механизм, когда результаты поиска выводятся сразу по мере ввода ключевого слова или выбора значения в выпадающем списке. Поэтому мы обработаем соответствующие события на каждый элемент

Во-первых, это TextChanged на изменение текста для поиска.
TextBox — Search — TextChanged

Затем при изменении выбора в выпадающем списке — Selection Changed

После этого мы добавляем обработку нажатия и снятия флажка у CheckBox

Загружаем данные в ComboBox, добавив элемент «все типы». Делается это в коде

Устанавливаем стартовые значения для элементов управления: CheckBox и ComboBox

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

Для начала создаем метод UpdateTours()

Выполняем фильтрацию, поиск и сортировку. После этого загружаем полученные результаты в коллекцию

Вызываем этот метод в каждом обработчике элементов управления и при запуске страницы