[FIXED] how to populate a collectionview defined inside a caruselpage Xamarin.Forms

Issue

I have a CaruselPage and inside the DataTemplate I have put a 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>

I manage to populate the carusel page but I can't find how to populate the collection view. All the solution that I find is for UWP, but I need to do this in xamarin.forms cross platform.

Solution

According to your description, you want to add collectionview control in CaruselPage, I do one sample that you can take a look.

Here is the 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>

The Model in CollectionView:

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

The Model in 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} } }

        };

    }
}

Please don't forget to add the following code in Android Mainactivity or ios AppDelegate, because you use CollectionView.

 Forms.SetFlags("CollectionView_Experimental");

Here is the sample at Github, you can download to test.

https://github.com/CherryBu/CarouselApp

her is the screenshot:

Answered By - Cherry Bu - MSFT

Answer Checked By - Terry (PHPFixing Volunteer)