Can you place a CarouselView in another CarouselView?

Question

I would like 2 ContentViews in the first CarouselView, but then I want to place another CarouselView in the second ContentView.

The code below gives me a "Value cannot be null". When I remove the ItemTemplate from the second CarouselView it builds but then I get this on the second ContentView (see image).

<CarouselView x:Name="outerCarousel">
        <CarouselView.ItemsSource>
            <x:Array Type="{x:Type ContentView}">
                <ContentView>
                    <ContentView.Content>
                        <Frame BackgroundColor="Red" />
                    </ContentView.Content>
                </ContentView>
                <ContentView>
                    <ContentView.Content>
                        <Frame>
                            <CarouselView x:Name="innerCarousel" Margin="50">
                                <CarouselView.ItemsSource>
                                    <x:Array Type="{x:Type ContentView}">
                                        <ContentView>
                                            <ContentView.Content>
                                                <Frame BackgroundColor="Green" />
                                            </ContentView.Content>
                                        </ContentView>
                                        <ContentView>
                                            <ContentView.Content>
                                                <Frame BackgroundColor="Blue" />
                                            </ContentView.Content>
                                        </ContentView>
                                    </x:Array>
                                </CarouselView.ItemsSource>
                                <CarouselView.ItemTemplate>
                                    <DataTemplate>
                                        <ContentView Content="{Binding .}" />
                                    </DataTemplate>
                                </CarouselView.ItemTemplate>
                            </CarouselView>
                        </Frame>
                    </ContentView.Content>
                </ContentView>
            </x:Array>
        </CarouselView.ItemsSource>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <ContentView Content="{Binding .}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

Answer 1

You could refer to the code below:

outerCarousel: Page7

Xaml:

<ContentPage.Content>
    <CarouselView x:Name="outerCarousel" ItemsSource="{Binding outers}">
        <CarouselView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CarouselView.ItemsLayout>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <ContentView Content="{Binding content}"></ContentView>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</ContentPage.Content>

Code Behind:

 public partial class Page7 : ContentPage
{
    public Page7()
    {
        InitializeComponent();
        this.BindingContext = new OuterViewModel();
    }
}
public class Outer
{
    public ContentView content { get; set; }
}
public class OuterViewModel
{
    public ObservableCollection<Outer> outers { get; set; }
    public OuterViewModel()
    {
        outers = new ObservableCollection<Outer>()
        {
            new Outer(){ content=new View1()},
            new Outer(){ content=new View2()}
        };
    }
}

innerCarousel: View1, View2

View1:

<ContentView.Content>
    <Frame BackgroundColor="Red" />
</ContentView.Content>

View2:

<ContentView.Content>
    <CarouselView x:Name="innerCarousel" Margin="50">
        <CarouselView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" />
        </CarouselView.ItemsLayout>
        <CarouselView.ItemsSource>
            <x:Array Type="{x:Type ContentView}">
                <ContentView>
                    <ContentView.Content>
                        <Frame BackgroundColor="Green" />
                    </ContentView.Content>
                </ContentView>
                <ContentView>
                    <ContentView.Content>
                        <Frame BackgroundColor="Blue" />
                    </ContentView.Content>
                </ContentView>
            </x:Array>
        </CarouselView.ItemsSource>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <ContentView Content="{Binding .}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</ContentView.Content>