Xamarin Forms Binding Object with List in property

Question

I have the following class in my project

  public class ListagemVideos
    {

        public int codplaylist { get; set; }
        public string titulo { get; set; }
        public string url { get; set; }
        public string descricao { get; set; }

    }

    public class PlayList
    {
        public int codplaylist { get; set; }
        public string playlist { get; set; }
        public string descricao { get; set; }
        public ObservableCollection<ListagemVideos> videos { get; set; } = new ObservableCollection<ListagemVideos>();
    }

My XAML file

 <AbsoluteLayout BackgroundColor="White" VerticalOptions="FillAndExpand">
                <CollectionView ItemsSource="{Binding ListaVideosCursos}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <Label
                                    FontFamily="titibold"
                                    FontSize="40"
                                    Text="{Binding playlist}" />
                                <Label
                                    FontFamily="titiregular"
                                    FontSize="20"
                                    Text="{Binding descricao}" />
                                <ScrollView Orientation="Horizontal">
                                    <StackLayout Margin="10">
                                        <Label
                                            x:Name="lblvideorecente"
                                            FontFamily="titiregular"
                                            FontSize="20"
                                            Text="{Binding videos.titulo}" />
                                    </StackLayout>
                                </ScrollView>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </AbsoluteLayout>

ListaVideosCursos is the name of the ObservableCollection that receives the object's data, well my question and that of many from what I've seen around is how to bind the properties of the List video object (titulo, url, descricao) to my collectionview?

Answer 1

You need to set the source videos for the StackLayout to help Label to find the value of titulo property.

You could refer to the code below.

Xaml:

 <AbsoluteLayout BackgroundColor="White" VerticalOptions="FillAndExpand">
    <CollectionView ItemsSource="{Binding playLists}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label
                                FontFamily="titibold"
                                FontSize="40"
                                Text="{Binding playlist}" />
                    <Label
                                FontFamily="titiregular"
                                FontSize="20"
                                Text="{Binding descricao}" />
                    <ScrollView Orientation="Horizontal">
                        <StackLayout Margin="10" BindableLayout.ItemsSource="{Binding videos}">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <Label
                                        x:Name="lblvideorecente"
                                        FontFamily="titiregular"
                                        FontSize="20"
                                        Text="{Binding  titulo}" />
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                            
                        </StackLayout>
                    </ScrollView>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</AbsoluteLayout>

Code behind:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        this.BindingContext = new ListagemVideosViewModel();

    }
}
public class ListagemVideosViewModel
{
    public ObservableCollection<PlayList> playLists { get; set; }
    public ListagemVideosViewModel()
    {
        playLists = new ObservableCollection<PlayList>()
        {
            new PlayList(){ codplaylist=1, descricao="A", playlist="aa", videos=new ObservableCollection<ListagemVideos>(){ new ListagemVideos() {  codplaylist=1, descricao="A2", titulo= "a_titulo", url= "A_url" } }},
            new PlayList(){ codplaylist=2, descricao="B", playlist="bb", videos=new ObservableCollection<ListagemVideos>(){ new ListagemVideos() {  codplaylist=2, descricao="B2", titulo= "b_titulo", url= "B_url" } }}

        };
    }
}
public class ListagemVideos
{

    public int codplaylist { get; set; }
    public string titulo { get; set; }
    public string url { get; set; }
    public string descricao { get; set; }

}

public class PlayList
{
    public int codplaylist { get; set; }
    public string playlist { get; set; }
    public string descricao { get; set; }
    public ObservableCollection<ListagemVideos> videos { get; set; } = new ObservableCollection<ListagemVideos>();
}