Can you place a CarouselView in another CarouselView? - xaml

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>