Отображение пользователей в виде списка

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

Это не руководство. Если оно вам требуется, используйте наше руководство по привязке данных, в котором приводятся пошаговые инструкции.

Мы начнем с краткого обсуждения привязки данных — что это такое и как она работает. Затем мы добавим ListView в пользовательский интерфейс, добавим привязку данных и настроим дополнительные функции для привязки данных.

Что необходимо знать?

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

Каждая привязка данных состоит из следующих двух компонентов:

• источник, который предоставляет данные для привязки;
• целевой объект в пользовательском интерфейсе, в котором отображаются данные.

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

• x:Bind — строго типизированный объект, который создает код во время компиляции для повышения производительности. x:Bind по умолчанию используется для единовременной привязки, которая оптимизирована для быстрого отображения данных только для чтения, которые не изменяются.
• Binding — слабо типизированный объект, который собирается во время выполнения. Это приводит к более низкой производительности по сравнению с x:Bind. В большинстве случаев следует использовать x:Bind вместо Binding. Тем не менее вы скорее встретите этот объект в старом коде. По умолчанию Binding используется для односторонней передачи данных, оптимизированной для данных только для чтения, которые могут измениться в источнике.

Мы рекомендуем использовать x:Bind, когда это возможно, и будем показывать этот объект во фрагментах кода в этой статье. Дополнительные сведения о различиях см. в разделе Сравнение компонентов расширений разметки {x:Bind} и {Binding}.

Создание источника данных

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

public class Customer
{
    public string Name { get; set; }
}

Создать список

Для отображения клиентов необходимо создать список для их хранения. ListView — базовый элемент управления XAML, который идеально подходит для выполнения этой задачи. Сейчас для ListView необходимо указать положение на странице, а через некоторое время — значение свойства ItemSource.

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

После привязки данных с элементом ListView рекомендуется вернуться к документации и поэкспериментировать с настройкой его внешнего вида и макета в соответствии с вашими потребностями.

Привязка данных к списку

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

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

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

• В коде программной части пользовательского интерфейса создайте свойство типа ObservableCollection<T> для хранения объектов Customer.
• Привяжите объект ItemSource элемента ListView к этому свойству.
• Предоставьте базовый шаблон ItemTemplate для ListView, который определяет, как отображается каждый элемент в списке.

Вы можете снова изучить документацию по представлению списка, если хотите изменить макет, добавить выбор элементов или настроить DataTemplate. Но что делать, если вы хотите изменить клиентов?

Изменение клиентов в пользовательском интерфейсе

Вы вывели клиентов в списке, но привязка данных дает вам больше возможностей. Что, если бы вы могли редактировать данные непосредственно в пользовательском интерфейсе? Для этого сначала поговорим о трех режимах привязки данных:

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

Если вы изучили предыдущие фрагменты кода, вы знаете, что созданная привязка использует x:Bind и не указывает режим, т. е. она является единовременной привязкой. Если вы хотите изменить клиентов непосредственно в пользовательском интерфейсе, вам необходимо сделать привязку двусторонней, чтобы изменения данных передавались в объекты Customer. Дополнительные сведения см. в статье Подробно о привязке данных.

Двусторонняя привязка также обновляет пользовательский интерфейс, если источник данных был изменен. Чтобы это работало, необходимо реализовать INotifyPropertyChanged в источнике и убедиться, что его методы задания свойств вызывают событие PropertyChanged. Общепринятая практика заключается в вызове вспомогательного метода, например OnPropertyChanged, как показано ниже.

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Затем сделайте текст в элементе ListView доступным для редактирования, используя TextBox вместо TextBlock, и установите для свойства Mode привязок данных значение TwoWay.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Быстрый способ убедиться, что это работает, — добавить второй ListView с элементами управления TextBox и привязками OneWay. Значения во втором списке будут изменяться автоматически при редактировании первого списка.

Дальнейшая работа

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

Полезные интерфейсы API и документы

Вот краткое описание интерфейсов API и другая полезная документация, которая поможет вам приступить к работе с привязкой данных.

Полезные интерфейсы API

Полезные документы

Полезные примеры кода