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

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

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

[pic 1]

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

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

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

[pic 2]

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

[pic 3]

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

[pic 4]

Второй способ создания столбцов напрямую через xaml код, заключается в том, что, нужно найти данный элемент:<="" p="" style="box-sizing: border-box;">

[pic 5]

После чего происходит копирование и настройка следующих полей. Вернёмся к структуре когда модель настроена под три столбца. Теперь следует изменить структуру первого столбца, для отображения картинки. Нужно заменить данную строку<="" p="" style="box-sizing: border-box;">

<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>