Stumped on Xamarin databinding cast exception

Issue

I've followed examples and worked with XAML for WPF and this never happens so I'm totally confused about why Xamarin Forms is complaining.

Here's a simple form where I'm trying to use a ListView. The general structure is what was generated by Visual Studio but I've put in the ListView with an template for drawing two Labels:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PrivateDiary.Views.AboutPage"
             xmlns:vm="clr-namespace:PrivateDiary.ViewModels"
             Title="{Binding Title}">
    
    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Orientation="Vertical">
        <ListView x:Name="AboutListView"
                  ItemsSource="{Binding Items}"
                  SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid VerticalOptions="Center" HorizontalOptions="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding Name}" Grid.Column="0" />
                        <Label Text="{Binding Detail}" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

The code behind:

namespace PrivateDiary.Views
{
    using Xamarin.Forms;

    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();
        }

    }
}

and my View Model:

namespace PrivateDiary.ViewModels
{
    using System.Collections.ObjectModel;

    public class AboutViewModel : BaseViewModel
    {
        public ObservableCollection<AboutItem> Items { get; set; } = new ObservableCollection<AboutItem>();
        public AboutViewModel()
        {
            Title = "About";

            Items.Add(new AboutItem {Name = "Version", Detail = "0.3"});
            Items.Add(new AboutItem {Name = "Privacy Policy", Detail = "#privacy"});

        }
        
    }

    public class AboutItem
    {
        public string Name { get; set; }
        public string Detail { get; set; }

    }
}

BaseViewModel is the stock one generated by Visual Studio 2019 (16.10.3) so I won't list it here. It implements the details for INotifyPropertyChanged, a page Title property and IsBusy property. When I run the app I get this:

If I removed the Items.Add(...) lines there's no problems.

Any ideas why it fails to cast?

Solution

Please add element ViewCell outside of element Grid in your xaml

You can refer to the following code:

<ContentPage.BindingContext>
    <listviewapp1:AboutViewModel></listviewapp1:AboutViewModel>
</ContentPage.BindingContext>
<ContentPage.Content>
    <StackLayout Orientation="Vertical">
        <ListView x:Name="AboutListView"
              ItemsSource="{Binding Items}"
              SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate>
<!--add ViewCell here-->
                    <ViewCell>  
                        <Grid VerticalOptions="Center" HorizontalOptions="Center">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Name}" Grid.Column="0" />
                            <Label Text="{Binding Detail}" Grid.Column="1" />
                        </Grid>

                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

Answered By - Jessie Zhang -MSFT