Поделиться через

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

  • Статья

Отображение и обработка реальных данных в пользовательском интерфейсе крайне важны для работы многих приложений. В этой статье показано, что необходимо знать, чтобы отобразить коллекцию объектов 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. Значения во втором списке будут изменяться автоматически при редактировании первого списка.

Примечание.

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

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

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

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

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

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

API Description
Шаблон данных Описание визуальной структуры объекта данных, которая позволяет отображать определенные элементы в пользовательском интерфейсе.
x:Bind Документация по рекомендуемому расширению разметки x:Bind.
Binding Документация по старому расширению разметки Binding.
ListView Элемент управления пользовательским интерфейсом, отображающий элементы данных в вертикальной стопке.
TextBox Базовый элемент управления текстом для отображения редактируемого текста в пользовательском интерфейсе.
INotifyPropertyChanged Интерфейс для отображения данных, который предоставляет их для привязки данных.
ItemsControl Свойство ItemsSource этого класса позволяет привязать ListView к источнику данных.

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

Раздел Описание
Подробно о привязке данных Общий обзор принципов привязки данных.
Общие сведения о привязке данных Подробные концептуальные сведения о привязке данных.
Представление списка Сведения о создании и настройке элемента управления ListView, в том числе о реализации DataTemplate.

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

Пример кода Description
Руководство по привязке данных Пошаговое руководство по основам привязки данных.
ListView и GridView Изучите более сложные элементы ListView с привязкой данных.
QuizGame Ознакомьтесь с привязкой данных в действии, включая класс BindableBase (в папке "Common"), для стандартной реализации INotifyPropertyChanged.