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

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

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

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

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

Что вам нужно знать?

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

Каждая привязка данных состоит из двух частей:

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

Чтобы реализовать привязку данных, необходимо добавить код в источник, предоставляющий данные привязке. Кроме того, необходимо добавить одно из двух расширений разметки в XAML, чтобы указать свойства источника данных. Вот ключевое различие между двумя:

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

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

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

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

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

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

Прежде чем вы сможете отобразить всех клиентов, необходимо создать список для их хранения. Представление списка — это базовый элемент управления 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.
  • Привяжите источник элементов ListView к этому свойству.
  • Укажите базовый элемент ItemTemplate для ListView, который будет настраивать отображение каждого элемента в списке.

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

Редактируйте клиентов через пользовательский интерфейс

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

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

Если вы следовали фрагментам кода из предыдущих версий, привязка, которую вы сделали, использует x:Bind и не задает режим, что делает его One-Time привязкой. Если вы хотите редактировать объекты Customers напрямую из пользовательского интерфейса, необходимо установить привязку на Two-Way, чтобы изменения из данных могли передаваться обратно в эти объекты Customers. Углубленное изучение привязки данных содержит больше информации.

Двусторонняя привязка также обновит пользовательский интерфейс, если источник данных изменен. Для этого необходимо реализовать 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и убедитесь, что для привязки данных режима 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 — это простой способ отображения привязки Two-Way в действии, но может привести к проблемам с удобством использования. Если вы хотите продолжить приложение, рассмотрите возможность использования других элементов управления XAML для редактирования данных и сохранения ListView только для отображения.

Идти дальше

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

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

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

Полезные API

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

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

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

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

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