WPF - создание списка для отображения данных или ListView

Что такое WPF?

Windows Presentation Foundation — один из компонентов ядра .NET Framework, который позволяет разработчикам создавать богатые, различные Windows приложения.

Как создать список для отображения данных или ListView ?

Для того чтобы создать список в приложении WPF, нужно перейти на xaml форму и открыть «Панель элементов». Там найти ListView и переместить его на рабочую область.

Далее настроить размеры.  ListView – это элемент, который позволяет отображать большое количество информации (текста, изображений, кнопок и т.д.) в виде списка.

Нужно создать столбцы с той информацией, будет отображена. Столбцы можно создать двумя способами: через свойства или же напрямую xaml кодом.

Необходимо найти в свойствах пункт «Общее» - «View» - «Columns». Нажать на клавишу с тремя точками и перейти в «Редактор коллекции GridViewColumn: Columns»

По стандартному значению один столбец уже создан, но из за того что у него нет названия и ширины, он не отображается в списке, поэтому, стоит задать ему «Width» и «Header».

Далее нужно нажать кнопку «Добавить», в результате чего появятся ещё столбцы, которые имеют название «Логин» и «Пароль». После того как все столбцы сформулированы, нужно нажать «ОК».

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

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

<GridViewColumn Header="Фото" Width="50"> 
	<GridViewColumn.CellTemplate> 
		<DataTemplate> 
			<StackPanel> 
				<Image Width="30" Source="{Binding photo}"/> 
			</StackPanel>
		</DataTemplate>
	</GridViewColumn.CellTemplate> 
 </GridViewColumn>

где:

• GridViewColumn – создаёт столбец в ListView;
• CellTemplate – задаёт шаблон для отображения содержимого ячейки;
• DataTemplate – позволяем использовать системные ресурсы;
• StackPanel – полотно для размещения элементов;
• Image – изображение.

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

• Width — ширина
• Source – ресурс, который принимает значение {Binding photo}. Данное значение позволяет принимать данные непосредственно из языка программирования, что позволяет создавать изображение в строке, а не отдельно от неё.

Далее, столбцам стоит добавить атрибут DisplayMemberBinding="" в котором указывается значение что и у изображения, только меняем «photo» на «login» и «password». После этого, элементу ListView, стоит добавить атрибут «x:Name» и указать значение listUsers, чтобы в дальнейшем из кода обратиться к списку. В итоге получается следующий код:

<ListView x:Name="listUsers" Margin="10"> 
	<ListView.View> 
		<GridView> 
			<GridViewColumn Header="Фото" Width="50"> 
				<GridViewColumn.CellTemplate> 
					<DataTemplate> 
						<StackPanel> 
							<Image Width="30" Source="{Binding photo}"/> 
						</StackPanel>
					</DataTemplate> 
				</GridViewColumn.CellTemplate>
			</GridViewColumn> 
			<GridViewColumn Header="Логин" Width="100" DisplayMemberBinding="{Binding login}"/>
			<GridViewColumn Header="Пароль" Width="100" DisplayMemberBinding="{Binding password}"/> 
		</GridView>
	</ListView.View>
</ListView>

Перейдём к коду. Создаётся отдельная функция, которая будет получать из базы данных данные и выводить их в списк. Как получить данные из таблицы были описаны в «Подключение к базе данных» (ссылка на статью) и «Выполнение запросов» (ссылка на статью). Для начала нужно создать класс, в котором переменные будут называться точно так же, как и имена атрибутов в которые будут приходить данные, т.е. photo, login и password.

Далее следует создать функцию, код которой выглядит так:

void LoadUsers() {
    DataTable dt_users = Select("SELECT * FROM [dbo].[users]"); // данные из БД  
    for (int i = 0; i < dt_users.Rows.Count; i++) // перебираем данные  
    {
        user dataUser = new user() // создаём экземпляр класса        
        {
            photo = dt_users.Rows[i][2].ToString(), // указываем изображение из таблицы    
            login = dt_users.Rows[i][0].ToString(), // указываем логин         
            password = dt_users.Rows[i][1].ToString() // казываем пароль     
        };
        listUsers.Items.Add(dataUser); // выводим строку в список 
    }
}

Не стоит забывать вызвать функцию, после инициализации компонентов.

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

Таким образом можно реализовать отображение данных в приложении WPF.

Автор статьи: Александр Каримов