可以在另一个 CarouselView 中放置一个 CarouselView 吗？

Posted 2023-02-23

【中文标题】可以在另一个 CarouselView 中放置一个 CarouselView 吗？

【英文标题】：Can you place a CarouselView in another CarouselView?

【发布时间】：2022-01-08 12:22:06

【问题描述】：

我想在第一个 CarouselView 中放置 2 个 ContentView，但是我想在第二个 ContentView 中放置另一个 CarouselView。

下面的代码给了我一个“值不能为空”。当我从它构建的第二个 CarouselView 中删除 ItemTemplate 时，然后我在第二个 ContentView 上得到它（见图）。

<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>

【参考方案1】：

你可以参考下面的代码：

outerCarousel：第 7 页

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>

代码背后：

 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

视图1：

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

视图2：

<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>