Stumped on Xamarin databinding cast exception - xaml

Question

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?

Answer 1

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>