Data Template for CarouselView throws error of DataTemplate returned non-view content in Xamarin.Forms

Question

I want to create DataTemplate for CarouselView where I can set ActivityIndicator before the image gets loaded. I have tried by following way but it throws an error. Can anybody please suggest me?

I am getting this error: System.InvalidOperationException: DataTemplate returned non-view content: 'TestPro.CacheImageCell'.

CacheImageCell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TestPro;assembly=TestPro"
            xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
            xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="TestPro.CacheImageCell">
  <ViewCell.View>
      <StackLayout>
            <ff:CachedImage x:Name="ProfileImage" Source="{Binding .}" Aspect="AspectFill" RelativeLayout.WidthConstraint=
                "{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
            </ff:CachedImage>
            <ActivityIndicator BindingContext="{x:Reference ProfileImage}"
                             IsVisible="{Binding IsLoading}" IsRunning="{Binding IsLoading}" />
        </StackLayout>
  </ViewCell.View>
</ViewCell>

CacheImageCell.cs

public partial class CacheImageCell : ViewCell
{
    public CacheImageCell()
    {
        InitializeComponent();
    }
    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        var profile = (BindingContext as string);
    }
}

CacheImageSelector.cs

public class CacheImageSelector : DataTemplateSelector
{
    private readonly DataTemplate cachingImageDataTemplate;
    public CacheImageSelector()
    {
        cachingImageDataTemplate = new DataTemplate(typeof(CacheImageCell));
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var imageURL = item as string;
        if (imageURL == null)
            return null;
        return cachingImageDataTemplate;
    }
}

UserProfile.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:local="clr-namespace:TestPro;assembly=TestPro"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="TestPro.UserProfile">
    <ContentPage.Resources>
        <ResourceDictionary>
          <local:CacheImageCell x:Key="CacheImageCell"/>
          <local:CacheImageSelector x:Key="CacheImageSelector" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <forms:CarouselView ItemTemplate="{StaticResource CacheImageSelector}" x:Name="MainCarosel" 
                ItemsSource="{Binding Pictures}"  Position="{Binding Position}" 
                IsVisible="{Binding IsImageVisible}"
                HeightRequest="375">
              </forms:CarouselView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Answer 1

I am getting this error: System.InvalidOperationException: DataTemplate returned non-view content: 'TestPro.CacheImageCell'.

Look at this error defined here

object content = ((DataTemplate)type).CreateContent();
var view = content as View;
if(view == null)
    throw new InvalidOperationException($"DataTemplate returned non-view content: '{content}'.");

We can see the content must be View , however CacheImageCell you used here is not a kind of View , it is ViewCell which not derive from View , you have to change it to ContentView or View .