无法将网格绑定到视图模型-网格中没有数据

Question

Please see the XAML below:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage">

    <ContentPage.BindingContext>
        <local:PersonViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <Label Grid.Column="1" Text="First Name" />
            <Label Grid.Column="2" Text="Surname" />
            <Label Grid.Column="3" Text="Date Of Birth" />
        </Grid>
        <ListView x:Name="listView" ItemsSource="{Binding people}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Label Grid.Column="1" Text="{Binding FirstName}" />
                            <Label Grid.Column="2" Text="{Binding Surname}" />
                            <Label Grid.Column="3" Text="{Binding Age}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

and the View Model:

public class PersonViewModel
    {
        public ObservableCollection<Person> people = new ObservableCollection<Person>();

        public PersonViewModel()
        {
            people.Add(new Person { Age = 36, FirstName = "Andrew", Surname = "Smith" });
            people.Add(new Person { Age = 65, FirstName = "David", Surname = "White" });
            people.Add(new Person { Age = 39, FirstName = "Bert", Surname = "Edwards" });
        }
    }

Only the column headings display. Why does the data not display?

I have spent all afternoon trying to get this to work. I have read lots of different answers, however I still cannot get any data to display.

Answer 1

You are missing the Grid Column Definitions (if it is the same as the header, so your xaml should look like this:

 <StackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="* />
                <ColumnDefinition Width="* />
                <ColumnDefinition Width="* />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <Label Grid.Column="1" Text="First Name" />
            <Label Grid.Column="2" Text="Surname" />
            <Label Grid.Column="3" Text="Date Of Birth" />
        </Grid>
        <ListView x:Name="listView" ItemsSource="{Binding people}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                             <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="* />
                                <ColumnDefinition Width="* />
                                <ColumnDefinition Width="* />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="1" Text="{Binding FirstName}" />
                            <Label Grid.Column="2" Text="{Binding Surname}" />
                            <Label Grid.Column="3" Text="{Binding Age}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>