Элементы управления в WPF. Список ListView

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

Список ListView

Работа в режиме ListBox

Так как ListView является прямым наследником класса ListBox, то он может работать также, как и свой предок. Например, создадим обычный список выбора

<ListView IsEnabled="True" SelectionMode="Extended">
    <ListViewItem>Первый элемента</ListViewItem>
    <ListViewItem>Второй элемента</ListViewItem>
    <ListViewItem>Третий элемента</ListViewItem>
</ListView>

В приложении этот ListView будет выглядеть следующим образом:

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

Использование свойства View

Элемент ListView предоставляет нам такое новое свойство, как

public ViewBase View { get; set; }

которое и определяет внешний вид всего списка элементов. На данный момент в WPF реализован наследник ViewBase — класс GridView, который позволяет отображать элементы ListView в виде таблицы. Для того, чтобы продемонстрировать работу с этим объектом, добавим в наш проект новый класс, свойства которого будут отображаться в ListView:

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
    public int Age { get; set; }
}

Теперь изменим код класса MainWindow следующим образом:

public partial class MainWindow : Window
{
    private readonly List<Person> _people;

    public MainWindow()
    {
        _people = new List<Person>()
        {
            new Person(){Name="Иван", Surname="Иванов", Age=18 },
            new Person(){Name="Петров", Surname="Пётр", Age=25 },
            new Person(){Name="Семенов", Surname="Семён", Age=26 },
        };


        InitializeComponent();
        list.ItemsSource = _people;
    }
}

здесь мы объявили поле только для чтения — список объектов класса Person:

private readonly List<Person> _people;

который мы заполняем в конструкторе класса и назначаем в качестве свойства ItemSource списку ListView:

list.ItemsSource = _people;

Теперь изменим код XAML:

<ListView x:Name="list" IsEnabled="True" SelectionMode="Extended">
    <ListView.View>
        <GridView>
            <GridViewColumn DisplayMemberBinding="{Binding Path=Name}">Имя</GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding Path=Surname}" Width="100">Фамилия</GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding Path=Age}">Возраст</GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

Здесь мы воспользовались свойством ListView.View и определили объект типа GridView, который содержит три столбца:

<GridViewColumn DisplayMemberBinding="{Binding Path=Name}">Имя</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Path=Surname}" Width="100">Фамилия</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Path=Age}">Возраст</GridViewColumn>

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

DisplayMemberBinding="{Binding Path=Name}"

означает, что значение свойства DisplayMemberBinding у GridViewColumn будет содержать значение свойства Name объекта Person. Теперь наш список будет выглядеть следующим образом:

Также мы можем настроить GridView, например, для показа подсказки заголовков и перемещения столбцов таблицы, используя свойства ColumnHeaderToolTip и AllowsColumnReorder соответственно:

<ListView x:Name="list" IsEnabled="True" SelectionMode="Extended">
    <ListView.View>
        <GridView AllowsColumnReorder="True" ColumnHeaderToolTip="Список людей" > 
            <GridViewColumn  DisplayMemberBinding="{Binding Path=Name}">Имя</GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding Path=Surname}" Width="100">Фамилия</GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding Path=Age}">Возраст</GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

 Итого

Список ListView является наследником ListBox и позволяет отображать как обычный список элементов, так и список элементов в виде таблицы. Для отображения таблицы используется свойство View в котором определяется содержимое списка в виде объекта типа GridView.