在列表中显示客户

在 UI 中显示和操作真实数据对于许多应用程序的功能至关重要。 本文将向你介绍需要了解的内容，以便在列表中显示客户对象集合。

这不是教程。 如果需要，请参阅 我们的数据绑定教程，该教程将提供分步引导式体验。

我们将首先快速讨论数据绑定，即什么是数据绑定以及它如何工作。 然后，我们将向 UI 添加 ListView ，添加数据绑定，并使用其他功能自定义数据绑定。

需要了解哪些信息？

数据绑定是在其 UI 中显示应用数据的一种方法。 这样就可以在应用中 分离关注点，使 UI 与其他代码分开。 这会创建一个更简洁的概念模型，更易于阅读和维护。

每个数据绑定都有两个部分：

• 提供要绑定的数据的源。
• 显示数据的 UI 中的目标。

若要实现数据绑定，需要向源添加代码，以便向绑定提供数据。 还需要向 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 后，建议返回到文档，并尝试自定义其外观和布局，以最符合你的需求。

将数据绑定到列表

现在，你已制作了一个用于保存绑定的基本 UI，需要配置源以提供它们。 下面是如何完成此操作的示例：

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>

数据绑定概述 在其有关绑定项集合的部分中，引导您解决类似问题。 此处的示例演示了以下关键步骤：

• 在 UI 的后台代码中，创建一个类型为 ObservableCollection<T> 的属性用于存储 Customer 对象。
• 将 ListView 的 ItemSource 绑定到该属性。
• 提供 ListView 的基本 ItemTemplate ，用于配置列表中每个项的显示方式。

如果您想自定义布局、添加项目选择或调整刚创建的数据模板 ，可以随时查看 列表视图 文档。 但是，如果要编辑客户，该怎么办？

通过 UI 编辑客户

你已在列表中显示客户，但数据绑定让你实现更多功能。 如果可以直接从 UI 编辑数据，该怎么办？ 为此，让我们首先讨论三种数据绑定模式：

• 一次性：此数据绑定仅激活一次，并且不会对更改做出反应。
• 单向：此数据绑定将使用数据源中的任何更改更新用户界面 (UI)。
• 双向：此数据绑定会随时同步更新 UI 和数据源，既可以根据数据源的任何更改更新 UI，也可以根据 UI 中的更改更新数据。

如果遵循了前面所述的代码片段，则创建的绑定使用 x：Bind，并且未指定模式，使其成为 One-Time 绑定。 如果想直接从 UI 界面编辑客户，则需要将其更改为 Two-Way 绑定，以便将数据中的更改传回到客户对象。 深入的数据绑定 有更多信息。

如果数据源已更改，双向绑定也会更新 UI。 为此，必须在源上实现 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));
}

然后使用 TextBox 而不是 TextBlock 编辑 ListView 中的文本，并确保将数据绑定上的 模式 设置为 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>

确保其正常运行的一种快速方法是添加一个包含 TextBox 控件和 OneWay 绑定的第二个 ListView。 第二个列表中的值将在编辑第一个列表时自动更改。

更进一步

现在您已经创建了这份具有双向绑定的客户列表，可以随意返回我们链接到的文档并尽情探索。 您可以查看我们的 数据绑定教程 进行基本绑定和高级绑定的分步演练，或者调查诸如 列表/细节模式 之类的控件，以创建更可靠的 UI。

有用的 API 和文档

下面是 API 和其他有用文档的快速摘要，可帮助你开始使用数据绑定。

有用的 API

有用的文档

有用的代码示例