Xamarin.Forms.Xaml.XamlParseException: Position 4:8. Cannot assign property "Content":

Question

I am very new using Xamarin. I would like to implement Microcharts into the item detail page of a Master Detail xamarin form application. I think I have isolated the error to two of the classes, but I can't seem to resolve it. I'd appreciate any insight into how I could fix it.

ItemDetailPage.xaml

<?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:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" 
             x:Class="TestApp.ItemDetailPage" 
             Title="{Binding Title}">
    <DataTemplate>
        <ViewCell> 
            <TextCell Text="{Binding Item.Text}" 
                      TextColor="Black"/>
            <TextCell Text="{Binding Item.Info}" 
                      TextColor="Black"/>
        </ViewCell> 
    </DataTemplate>
    <forms:ChartView x:Name="Chart1" 
                     HeightRequest = "150"/>
</ContentPage>

ItemDetailPage.xaml.cs

using System; 
using Xamarin.Forms;
using System.Collections.Generic;
using Microcharts; 
using Entry = Microcharts.Entry;
using SkiaSharp; 

namespace TestApp
{
    public partial class ItemDetailPage : ContentPage
    {
        List<Microcharts.Entry> entries = new List<Microcharts.Entry>
        {
               new Entry(200)
                {
                    Label = "January",
                    ValueLabel = "200",
                    Color = SKColor.Parse("#266489")
                },
                new Entry(400)
                {
                    Label = "February",
                    ValueLabel = "400",
                    Color = SKColor.Parse("#68B9C0")
                },
                new Entry(-100)
                {
                    Label = "March",
                    ValueLabel = "-100",
                    Color = SKColor.Parse("#90D585")
                }
        };

        ItemDetailViewModel viewModel;

        // Note - The Xamarin.Forms Previewer requires a default, parameterless constructor to render a page.
        public ItemDetailPage()
        {
            InitializeComponent();

            var item = new Item
            {
                Text = "Item 1",
                Description = "This is an item description."
            };

            viewModel = new ItemDetailViewModel(item);
            BindingContext = viewModel;
        }

        public ItemDetailPage(ItemDetailViewModel viewModel)
        {
            InitializeComponent();

            BindingContext = this.viewModel = viewModel;
        }
    }
}

ItemPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TestApp
{
    public partial class ItemsPage : ContentPage
    {
        ItemsViewModel viewModel;

        public ItemsPage()
        {
            InitializeComponent();

            BindingContext = viewModel = new ItemsViewModel();
        }

        async void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
        {
            var item = args.SelectedItem as Item;
            if (item == null)
                return;

            await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));

            // Manually deselect item
            ItemsListView.SelectedItem = null;
        }

        async void AddItem_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new NewItemPage());
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            if (viewModel.Items.Count == 0)
                viewModel.LoadItemsCommand.Execute(null);
        }
    }
}

The error only occurs when I click on any of the items on the list view page.

Here is the full error message if it helps:

Xamarin.Forms.Xaml.XamlParseException: Position 4:8. Cannot assign property "Content": Property does not exists, or is not assignable, or mismatching type between value and property at Xamarin.Forms.Xaml.ApplyPropertiesVisitor.SetPropertyValue (System.Object xamlelement, Xamarin.Forms.Xaml.XmlName propertyName, System.Object value, System.Object rootElement, Xamarin.Forms.Xaml.INode node, Xamarin.Forms.Xaml.HydrationContext context, System.Xml.IXmlLineInfo lineInfo) [0x000ee] in D:\agent_work\1\s\Xamarin.Forms.Xaml\ApplyPropertiesVisitor.cs:345 at Xamarin.Forms.Xaml.ApplyPropertiesVisitor.Visit (Xamarin.Forms.Xaml.ElementNode node, Xamarin.Forms.Xaml.INode parentNode) [0x00338] in D:\agent_work\1\s\Xamarin.Forms.Xaml\ApplyPropertiesVisitor.cs:134 at Xamarin.Forms.Xaml.ElementNode.Accept (Xamarin.Forms.Xaml.IXamlNodeVisitor visitor, Xamarin.Forms.Xaml.INode parentNode) [0x000ab] in D:\agent_work\1\s\Xamarin.Forms.Xaml\XamlNode.cs:149 at Xamarin.Forms.Xaml.RootNode.Accept (Xamarin.Forms.Xaml.IXamlNodeVisitor visitor, Xamarin.Forms.Xaml.INode parentNode) [0x00078] in D:\agent_work\1\s\Xamarin.Forms.Xaml\XamlNode.cs:203 at Xamarin.Forms.Xaml.XamlLoader.Visit (Xamarin.Forms.Xaml.RootNode rootnode, Xamarin.Forms.Xaml.HydrationContext visitorContext) [0x0007b] in D:\agent_work\1\s\Xamarin.Forms.Xaml\XamlLoader.cs:141 at Xamarin.Forms.Xaml.XamlLoader.Load (System.Object view, System.String xaml) [0x0004b] in D:\agent_work\1\s\Xamarin.Forms.Xaml\XamlLoader.cs:89 at Xamarin.Forms.Xaml.XamlLoader.Load (System.Object view, System.Type callingType) [0x0002f] in D:\agent_work\1\s\Xamarin.Forms.Xaml\XamlLoader.cs:68 at Xamarin.Forms.Xaml.Extensions.LoadFromXaml[TXaml] (TXaml view, System.Type callingType) [0x00000] in D:\agent_work\1\s\Xamarin.Forms.Xaml\ViewExtensions.cs:36 at TestApp.ItemDetailPage.InitializeComponent () [0x00001] in /Users/rehamathur/Projects/TestApp/iOS/obj/iPhoneSimulator/Debug/TestApp.iOS.Views.ItemDetailPage.xaml.g.cs:22 at TestApp.ItemDetailPage..ctor (TestApp.ItemDetailViewModel viewModel) [0x000c1] in /Users/rehamathur/Projects/TestApp/TestApp/Views/ItemDetailPage.xaml.cs:57 at TestApp.ItemsPage+d__2.MoveNext () [0x00037] in /Users/rehamathur/Projects/TestApp/TestApp/Views/ItemsPage.xaml.cs:26 at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () [0x0000c] in /Library/Frameworks/Xamarin.iOS.framework/Versions/11.6.1.4/src/mono/mcs/class/referencesource/mscorlib/system/runtime/exceptionservices/exceptionservicescommon.cs:152 at System.Runtime.CompilerServices.AsyncMethodBuilderCore+<>c.b__6_0 (System.Object state) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/11.6.1.4/src/mono/mcs/class/referencesource/mscorlib/system/runtime/compilerservices/AsyncMethodBuilder.cs:1018 at UIKit.UIKitSynchronizationContext+c__AnonStorey0.<>m__0 () [0x00000] in /Users/builder/data/lanes/5665/db807ec9/source/xamarin-macios/src/UIKit/UIKitSynchronizationContext.cs:24 at Foundation.NSAsyncActionDispatcher.Apply () [0x00000] in /Users/builder/data/lanes/5665/db807ec9/source/xamarin-macios/src/Foundation/NSAction.cs:163 at at (wrapper managed-to-native) UIKit.UIApplication:UIApplicationMain (int,string[],intptr,intptr) at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Users/builder/data/lanes/5665/db807ec9/source/xamarin-macios/src/UIKit/UIApplication.cs:79 at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x00038] in /Users/builder/data/lanes/5665/db807ec9/source/xamarin-macios/src/UIKit/UIApplication.cs:63 at TestApp.iOS.Application.Main (System.String[] args) [0x00001] in /Users/xxxxxxxx/Projects/TestApp/iOS/Main.cs:17

Answer 1

As @Jason said both the ViewCell and the ContentPage itself can have only a single child that will be the implicitly set as Content property value.

It's hard to say precisely what you want, once there's a lot of disconnection on your code, as a displaced DataTemplateand bindings to properties that weren't shown on your code sample (as Item.Info and Item.Text).

The DataTemplate code should be like one of this options (But I really can't say where you'll put it, but for sure it's not in that the detail page like that):

1 - Using a ViewCell with a StackLayout

<DataTemplate>
    <ViewCell> 
        <StackLayout>
            <Label Text="{Binding Item.Text}" 
                   TextColor="Black"/>
            <Label Text="{Binding Item.Info}" 
                   TextColor="Black"/>
        </StackLayout>
    </ViewCell> 
</DataTemplate>

2 - Using TextCell

<DataTemplate>
    <TextCell Text="{Binding Item.Text}" 
              Detail="{Binding Item.Info}" 
              TextColor="Black" 
              DetailColor="Black"/>
</DataTemplate>

And about you ContentPage, the root element must be single too. Like this:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:forms="clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" 
             x:Class="TestApp.ItemDetailPage" 
             Title="{Binding Title}">
    <StackLayout>
        <Label Text="Any Title"/>
        <!-- Some other components -->
        <forms:ChartView x:Name="Chart1" 
                         HeightRequest = "150"/>
    </StackLayout>
</ContentPage>