How do i populate a ListView using x:Bind and System.Collections.Generic.List and generate columns

Question

I am trying to populate a ListView with a List while setting the ItemsSource as a x:Bind , and i cant figure out how to make columns and make the items display properly.

Here is what i got so far:

The Customer class in Database.cs

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; }
}

The FetchCustomer method in Database.cs that returns a list of Customer objects

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;
    }
}

The CustomerView Page

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();
    }
}

The XAML where i bind the ItemsSource

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

How do i go forward making this so that columns are auto generated and the items display properly?

I have tried to add ListViewHeaderItem s and browse through the differerent properties but havent found out how yet.

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

The result i get with nothing else than the binding is this:

Update

I have made some progress today and i now have correct data output. I found out that with the use DataTemplate's i can set Binding on elements.

I still struggle with showing the data in correct manner.

Here is the XAML i now have written:

 <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> 

And the result:

So as you can se the GridViewHeaderItem's are not showing and the GridViewItem's are not showing properly.

Here is the result i want to end up with:

How would i go forward writing my XAML to achieve such a result?

Answer 1

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