.net MAUI DataTemplate with a CollectionView that contains <ContentPresenter /> in its ItemTemplate, "No installed components were detected"

Question

We have a number of Views that display a list of Models and in each of those views, tapping on an Item displays an action sheet.

Everything is working well but we want to utilize the ControlTemplate to ensure consistency across views. First attempt seemed to work but it turns out it only worked because the ItemsSource had just one item in it. Once an ItemsSource contained more than one item, then a "No installed components were detected" exception was thrown. The first item was still rendered appropriately and tapping on it functioned as expected.

Here are the files in play:

ListViewsTemplate.xaml (control template)

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="MauiIssues.Controls.ListViewsTemplate"
         ControlTemplate="{DynamicResource ContainerTemplate}"
         x:Name="this">
<ContentView.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="ContainerTemplate">
            <Frame BindingContext="{x:Reference this}" Padding="10, 0, 10, 0">
                <CollectionView ItemsSource="{TemplateBinding ItemsSource}">
                    <CollectionView.ItemsLayout><LinearItemsLayout Orientation="Vertical" /></CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Frame>
                                    <Frame.GestureRecognizers>
                                        <TapGestureRecognizer 
                                            Command="{TemplateBinding ItemTapped}"
                                            CommandParameter="{Binding .}" />
                                    </Frame.GestureRecognizers>
                                    <ContentPresenter />
                                </Frame>
                                <Rectangle IsVisible="{OnPlatform false, Android=True}" HeightRequest="2" Fill="Black"/>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Frame>
        </ControlTemplate>
    </ResourceDictionary>
</ContentView.Resources>

ListViewsTemplate.xaml.cs (control template)

using System.Collections;
using System.Windows.Input;

namespace MauiIssues.Controls
{
    public partial class ListViewsTemplate : ContentView
    {
        public IEnumerable ItemsSource
        {
            get => (IEnumerable)GetValue(ItemsSourceProperty);
            set => SetValue(ItemsSourceProperty, value);
        }
        public static readonly BindableProperty ItemsSourceProperty =
            BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(ListViewsTemplate), defaultBindingMode: BindingMode.TwoWay);
        
        public ICommand ItemTapped
        {
            get => (ICommand)GetValue(ItemTappedProperty);
            set => SetValue(ItemTappedProperty, value);
        }
        public static readonly BindableProperty ItemTappedProperty =
            BindableProperty.Create(nameof(ItemTapped), typeof(ICommand), typeof(ListViewsTemplate), defaultBindingMode: BindingMode.TwoWay);

        public ListViewsTemplate() { InitializeComponent(); }

    }
}

ListViewsTemplate.xaml (content page)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:model="clr-namespace:MauiIssues.Models"
             xmlns:uc="clr-namespace:MauiIssues.Controls"
             xmlns:viewmodel="clr-namespace:MauiIssues.ViewModels"
             x:Class="MauiIssues.Views.ListViewsTemplate"
             x:DataType="viewmodel:ListViewsTemplateViewModel">
    <uc:ListViewsTemplate ItemsSource="{Binding Items}" ItemTapped="{Binding ItemTappedCommand}" VerticalOptions="StartAndExpand" >
        <Label BindingContext="{Binding Source={RelativeSource AncestorType={x:Type model:ListViewsTemplateModel}}}" 
               x:DataType="{x:Type model:ListViewsTemplateModel}" 
               Text="{Binding Name}" />
    </uc:ListViewsTemplate>
</ContentPage>

ListViewsTemplate.xaml.cs (content page)

using MauiIssues.ViewModels;

namespace MauiIssues.Views
{
    public partial class ListViewsTemplate : ContentPage
    {
        public ListViewsTemplateViewModel ViewModel { get; }

        public ListViewsTemplate()
        {
            base.BindingContext = this.ViewModel = new ListViewsTemplateViewModel();
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            await this.ViewModel.OnAppearing();
            base.OnAppearing();
        }
    }
}

ListViewsTemplateViewModel.cs (view model)

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MauiIssues.Models;
using System.Collections.ObjectModel;

namespace MauiIssues.ViewModels
{
    public partial class ListViewsTemplateViewModel : ObservableObject
    {
        public ObservableCollection<ListViewsTemplateModel> Items { get; } = new ();

        [RelayCommand]
        async Task ItemTapped(ListViewsTemplateModel item)
        {
            await App.Current.MainPage.DisplayAlert("tapped item", item.Name, "OK");
        }

        public async Task OnAppearing() 
        {
            this.Items.Add(new ListViewsTemplateModel() { Name = $"Item {this.Items.Count + 1}" });
            await Task.CompletedTask;
        }
    }
}

When you first navigate to the view, everything is good to go. When you navigate away and come back to the view you get:

No installed components were detected.

at System.Runtime.InteropServices.Marshal.ThrowExceptionForHR(Int32 errorCode) at WinRT.DelegateExtensions.DynamicInvokeAbi(Delegate del, Object[] invoke_params) at ABI.System.Collections.Generic.IVectorMethods1.Append(IObjectReference obj, T value) at ABI.System.Collections.Generic.IListMethods1.Add(IObjectReference obj, T item) at Microsoft.UI.Xaml.Controls.UIElementCollection.Add(UIElement item) at Microsoft.Maui.Handlers.ContentViewHandler.UpdateContent(IContentViewHandler handler) at Microsoft.Maui.Handlers.ContentViewHandler.MapContent(IContentViewHandler handler, IContentView page) at Microsoft.Maui.Controls.Element.OnPropertyChanged(String propertyName) at Microsoft.Maui.Controls.BindableObject.SetValueActual(BindableProperty property, BindablePropertyContext context, Object value, Boolean currentlyApplying, SetValueFlags attributes, Boolean silent) at Microsoft.Maui.Controls.BindableObject.SetValueCore(BindableProperty property, Object value, SetValueFlags attributes, SetValuePrivateFlags privateAttributes) at Microsoft.Maui.Controls.BindingExpression.ApplyCore(Object sourceObject, BindableObject target, BindableProperty property, Boolean fromTarget) at Microsoft.Maui.Controls.BindingExpression.Apply(Object sourceObject, BindableObject target, BindableProperty property) at Microsoft.Maui.Controls.Binding.d__27.MoveNext() at System.Threading.Tasks.Task.<>c.b__128_0(Object state) at Microsoft.UI.Dispatching.DispatcherQueueSynchronizationContext.<>c__DisplayClass2_0.b__0() --- End of stack trace from previous location --- at WinRT.ExceptionHelpers.g__Throw|20_0(Int32 hr) at ABI.Windows.ApplicationModel.Core.IUnhandledErrorMethods.Propagate(IObjectReference _obj) at Windows.ApplicationModel.Core.UnhandledError.Propagate() at Microsoft.AppCenter.Utils.ApplicationLifecycleHelperWinUI.<.ctor>b__0_3(Object sender, UnhandledErrorDetectedEventArgs eventArgs) --- End of stack trace from previous location --- at Microsoft.AppCenter.Utils.ApplicationLifecycleHelperWinUI.<.ctor>b__0_3(Object sender, UnhandledErrorDetectedEventArgs eventArgs) at WinRT.EventSource__EventHandler1.EventState.<GetEventInvoke>b__1_0(Object obj, T e) at ABI.System.EventHandler1.Do_Abi_Invoke[TAbi](Void* thisPtr, IntPtr sender, TAbi args)

UPDATE:

To provide a little more clarity, what this is trying to accomplish is the same as what a Master Page does in asp.net.

Page.Master

<body>
   <div class="main">
       <asp:ContentPlaceHolder ID="FilterContent" runat="server" />
       <asp:Button ID="btnSearch" runat="server" Text="Search" />
       <div class="filterseparator" />
       <asp:ContentPlaceHolder ID="GridContent" runat="server" />
       <div class="gridseparator" />
       <asp:ContentPlaceHolder ID="MainContent" runat="server" />
   </div>
</body>

Here each web page uses the Master Page and then places their own controls within the ContentPlaceHolders which is (to our understanding) what the ContentPresenter is for.

Answer 1

Solution 1

Remove the label in uc:ListViewsTemplate:

<uc:ListViewsTemplate ItemsSource="{Binding Items}" ItemTapped="{Binding ItemTappedCommand}" VerticalOptions="StartAndExpand" >
            <!--<Label BindingContext="{Binding Source={RelativeSource AncestorType={x:Type model:ListViewsTemplateModel}}}"
               x:DataType="{x:Type model:ListViewsTemplateModel}"
               Text="{Binding Name}" />-->
</uc:ListViewsTemplate>

In your ListViewsTemplate.xaml:

.....
<DataTemplate>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Frame Grid.Row="0">
      <Frame.GestureRecognizers>
        <TapGestureRecognizer Command="{TemplateBinding ItemTapped}" 
                              CommandParameter="{Binding .}"/>
      </Frame.GestureRecognizers>
      <StackLayout>
        <Label x:DataType="{x:Type model:ListViewsTemplateModel}" 
               Text="{Binding Name}"/>
      </StackLayout>
    </Frame>
    <Rectangle Grid.Row="1" IsVisible="{OnPlatform false, Android=True}" HeightRequest="2" Fill="Black"/>
  </Grid>
</DataTemplate>
.....

Here is the effect.

Solution 2 Create a ContentPage and put these codes into it:

.....
<ContentPage.Resources>
  <ResourceDictionary>
    <ControlTemplate x:Key="ContainerTemplate">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Frame Grid.Row="0">
          <Frame.GestureRecognizers>
            <TapGestureRecognizer Command="{TemplateBinding Path=Parent.BindingContext.ItemTappedCommand}" 
            CommandParameter="{Binding Source={RelativeSource AncestorType={x:Type model:ListViewsTemplateModel}}}"/>
          </Frame.GestureRecognizers>
          <ContentPresenter/>
        </Frame>
        <Rectangle Grid.Row="1" IsVisible="{OnPlatform false, Android=True}" HeightRequest="2" Fill="Black"/>
      </Grid>
    </ControlTemplate>
  </ResourceDictionary>
</ContentPage.Resources>

<Frame Padding="10, 0, 10, 0">
  <CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemsLayout>
      <LinearItemsLayout Orientation="Vertical"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
      <DataTemplate>
        <ContentView ControlTemplate="{StaticResource ContainerTemplate}">
          <Label x:DataType="{x:Type model:ListViewsTemplateModel}" Text="{Binding Name}"/>
        </ContentView>
      </DataTemplate>
    </CollectionView.ItemTemplate>
  </CollectionView>
</Frame>
.....

.xaml.cs:

public partial class NewPage1 : ContentPage
{
    public ListViewsTemplateViewModel ViewModel { get; }

    public NewPage1()
    {
        base.BindingContext = this.ViewModel = new ListViewsTemplateViewModel();
        InitializeComponent();
    }
    protected override async void OnAppearing()
    {
        await this.ViewModel.OnAppearing();
        base.OnAppearing();
    }
}

You can also put codes of ContentPage.Resources into App.xaml:

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Resources/Styles/Colors.xaml"/>
      <ResourceDictionary Source="Resources/Styles/Styles.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    <!-- you can also put codes of ContentPage.Resources into here --> 
    <ControlTemplate x:Key="ContainerTemplate">
            ......
    </ControlTemplate>
    
  </ResourceDictionary>
</Application.Resources>

And here is the effect.

Answer 2

Do not put the label into uc:ListViewsTemplate:

<uc:ListViewsTemplate ItemsSource="{Binding Items}" ItemTapped="{Binding ItemTappedCommand}" VerticalOptions="StartAndExpand" >
            <!--<Label BindingContext="{Binding Source={RelativeSource AncestorType={x:Type model:ListViewsTemplateModel}}}"
               x:DataType="{x:Type model:ListViewsTemplateModel}"
               Text="{Binding Name}" />-->
</uc:ListViewsTemplate>

Because then the ContentView(ListViewsTemplate) you created will lose its meaning. So, put it into ListViewsTemplate:

.....
<DataTemplate>
    <Grid>
        <Frame>
            <Frame.GestureRecognizers>
                <TapGestureRecognizer Command="{TemplateBinding ItemTapped}" 
                                      CommandParameter="{Binding .}" />
            </Frame.GestureRecognizers>

            <!-- Put it here or anywhere else you like -->
            <Label x:DataType="{x:Type model:ListViewsTemplateModel}" 
                   Text="{Binding Name}" />
        </Frame>
        <Rectangle IsVisible="{OnPlatform false, Android=True}" HeightRequest="2" Fill="Black"/>
    </Grid>
</DataTemplate>
.....

I tested it, and it works well.

Update

<DataTemplate>
  <Grid>
    <Frame>
      <Frame.GestureRecognizers>
        <TapGestureRecognizer Command="{TemplateBinding ItemTapped}" CommandParameter="{Binding .}"/>
      </Frame.GestureRecognizers>
      
      <!-- use stacklayout -->
      <StackLayout>
        <ContentPresenter/>
        <Label x:DataType="{x:Type model:ListViewsTemplateModel}" 
               Text="{Binding Name}"/>
      </StackLayout>
      
    </Frame>
    <Rectangle IsVisible="{OnPlatform false, Android=True}" HeightRequest="2" Fill="Black"/>
  </Grid>
</DataTemplate>