c# - 如何填充在 caruselpage Xamarin.Forms 中定义的集合视图

Question

我有一个 CaruselPage，在 DataTemplate 里面我放了一个 CollectionView

<CarouselPage.ItemTemplate>
    <DataTemplate>
        <ContentPage>

            <ContentPage.Content>


                            <StackLayout>
                                <CollectionView   

                ItemsSource="{Binding Cards}"

                                 VerticalOptions="CenterAndExpand"   
                                 HorizontalOptions="Center"   


                                 EmptyView="Non ci sono Card Formazione"  
                                 Margin="10"
                 x:Name="CV"


     >
                                    <CollectionView.ItemsLayout>
                                        <GridItemsLayout Orientation="Vertical" Span="1" />
                                    </CollectionView.ItemsLayout>
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <Frame BorderColor="Black">
                                                <StackLayout>

                                                    <Label Text="{Binding DisciplinaCard}" Style="{StaticResource LabelTesStyle}"/>
                                                    <Label Text="{Binding DataCard}" Style="{StaticResource LabelTesStyle}"/>
                                                </StackLayout>
                                            </Frame>

                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>
                            </StackLayout>
                        </StackLayout>



            </ContentPage.Content>
        </ContentPage>
    </DataTemplate>
</CarouselPage.ItemTemplate>

我设法填充轮播页面，但找不到如何填充集合视图。我找到的所有解决方案都适用于 UWP，但我需要在 xamarin.forms 跨平台中执行此操作。

标签： c#xamlxamarin.formscross-platform

Answer 1

根据您的描述，您想在 CaruselPage 中添加 collectionview 控件，我做了一个示例，您可以看看。

这是 CaruselPage：

<CarouselPage
x:Class="CaruselApp.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<CarouselPage.ItemTemplate>
    <DataTemplate>
        <ContentPage>
            <StackLayout>

                <Label Margin="10" Text="{Binding title}" />
                <CollectionView ItemsSource="{Binding collections}">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="1" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Frame BorderColor="Black">
                                <StackLayout>

                                    <Label Text="{Binding Name}" />
                                    <Label Text="{Binding Age}" />
                                </StackLayout>
                            </Frame>

                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </StackLayout>
        </ContentPage>
    </DataTemplate>
</CarouselPage.ItemTemplate>

CollectionView 中的模型：

public class CollectionModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

CarouselPage 中的模型：

 public class CaruselModel
{
    public ObservableCollection<CollectionModel> collections { get; set; }

    public string title { get; set; }

    public static ObservableCollection<CaruselModel> carusels { get; set; }

     static CaruselModel()
    {
        carusels = new ObservableCollection<CaruselModel>()
        {
            new CaruselModel(){title="title 1", collections=new ObservableCollection<CollectionModel>(){ new CollectionModel() { Name="Cherry",Age=12},new CollectionModel() { Name="barry",Age=23} } },
             new CaruselModel(){title="title 2", collections=new ObservableCollection<CollectionModel>(){ new CollectionModel() { Name="Annine",Age=18},new CollectionModel() { Name="Wendy",Age=25} } },
              new CaruselModel(){title="title 3", collections=new ObservableCollection<CollectionModel>(){ new CollectionModel() { Name="Mattew",Age=12},new CollectionModel() { Name="Leo",Age=23} } },
               new CaruselModel(){title="title 4", collections=new ObservableCollection<CollectionModel>(){ new CollectionModel() { Name="Jessie",Age=12},new CollectionModel() { Name="Junior",Age=23} } },
                new CaruselModel(){title="title 5", collections=new ObservableCollection<CollectionModel>(){ new CollectionModel() { Name="Jack",Age=12},new CollectionModel() { Name="Land",Age=23} } }

        };

    }
}

请不要忘记在 Android Mainactivity 或 ios AppDelegate 中添加以下代码，因为您使用的是 CollectionView。

 Forms.SetFlags("CollectionView_Experimental");

这是 Github 上的示例，您可以下载进行测试。

https://github.com/CherryBu/CarouselApp

她是截图：