如何使用 x:Bind 和 System.Collections.Generic.List 填充 ListView 并生成列

Question

我试图用List 填充ListView，同时将ItemsSource 设置为x:Bind，但我不知道如何制作列并使项目正确显示。

这是我目前得到的：

Database.cs 中的 Customer 类

public class Customer
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    public string CompanyName { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Phone { get; set; }
    public string Email { get; set; }
    public string Adress { get; set; }
    public int PostCode { get; set; }
    public string PostArea { get; set; }
    public string CreatedDate { get; set; }
    public string UpdatedDate { get; set; }
}

Database.cs 中返回客户对象列表的 FetchCustomer 方法

public List<Customer> FetchCustomer()
{
    using (SQLiteConnection _connection = new SQLiteConnection(sqlitePlatform, dbFilePath))
    {
        List<Customer> customers = new List<Customer>();
        var _customers = _connection.Table<Customer>();
        foreach (Customer customer in _customers)
        {
            customers.Add(customer);
        }
        return customers;
    }
}

CustomerView 页面

public sealed partial class CustomerView : Page
{
    public List<Customer> CustomersFromDB { get; set; }

    public CustomerView()
    {
        this.InitializeComponent();
        ReadyCustomers();
    }

    private void ReadyCustomers()
    {
        var db = new Database();
        CustomersFromDB = db.FetchCustomer();
    }
}

我绑定 ItemsSource 的 XAML

<ListView Grid.Row="1" ItemsSource="{x:Bind CustomersFromDB}"/>

我该如何继续这样做，以便自动生成列并正确显示项目？

我尝试添加ListViewHeaderItems 并浏览不同的属性，但还没有找到方法。

<ListView Grid.Row="1" ItemsSource="{x:Bind CustomersFromDB}">
    <ListView.Header>
        <ListViewHeaderItem ???></ListViewHeaderItem>
    </ListView.Header>
</ListView> 

除了绑定之外，我得到的结果是这样的：

更新

我今天取得了一些进展，现在我有正确的数据输出。我发现使用 DataTemplate 可以在元素上设置绑定。

我仍然难以以正确的方式显示数据。

这是我现在编写的 XAML：

<GridView Grid.Row="1" ItemsSource="{x:Bind CustomersFromDB}" HorizontalAlignment="Stretch">
    <GridViewHeaderItem Content="CompanyName"></GridViewHeaderItem>
    <GridViewHeaderItem Content="FirstName"></GridViewHeaderItem>
    <GridViewHeaderItem Content="LastName"></GridViewHeaderItem>
    <GridViewHeaderItem Content="Phone"></GridViewHeaderItem>
    <GridViewHeaderItem Content="Email"></GridViewHeaderItem>
    <GridViewHeaderItem Content="Adress"></GridViewHeaderItem>
    <GridViewHeaderItem Content="PostCode"></GridViewHeaderItem>
    <GridViewHeaderItem Content="PostArea"></GridViewHeaderItem>
    <GridViewHeaderItem Content="Comment"></GridViewHeaderItem>
    <GridView.ItemTemplate>
        <DataTemplate>
            <GridViewItem BorderThickness="0" BorderBrush="Transparent">
                <GridViewItem.Content>
                    <StackPanel Orientation="Horizontal" BorderThickness="0" BorderBrush="Transparent">
                        <TextBlock Text="{Binding CompanyName}"></TextBlock>
                        <TextBlock Text="{Binding FirstName}"></TextBlock>
                        <TextBlock Text="{Binding LastName}"></TextBlock>
                        <TextBlock Text="{Binding Phone}"></TextBlock>
                        <TextBlock Text="{Binding Email}"></TextBlock>
                        <TextBlock Text="{Binding Adress}"></TextBlock>
                        <TextBlock Text="{Binding PostCode}"></TextBlock>
                        <TextBlock Text="{Binding PostArea}"></TextBlock>
                        <TextBlock Text="{Binding Comment}"></TextBlock>
                        <TextBlock Text="{Binding CreatedDate}"></TextBlock>
                        <TextBlock Text="{Binding UpdatedDate}"></TextBlock>
                    </StackPanel>
                </GridViewItem.Content>
            </GridViewItem>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

结果：

所以你可以看到 GridViewHeaderItem 没有显示并且 GridViewItem 没有正确显示。

这是我想要的结果：

我将如何继续编写我的 XAML 来实现这样的结果？

Answer 1

只需将边距应用于文本块 margin="5,0,5,0"