Xamarin Forms CollectionView stays empty after binding it

Question

I have a problem. I created this class that creates an ImageSource collection ObservableCollection<TemplateSource> :

public class TemplateListViewModel
{
    public ObservableCollection<TemplateSource> sourceList { get; set; }

    public TemplateListViewModel()
    {
        sourceList = new ObservableCollection<TemplateSource>();
        loadingTemplates += onLoadingTemplates;
        LoadTemplateList();
    }

    private event EventHandler loadingTemplates = delegate { };

    private void LoadTemplateList()
    {
        loadingTemplates(this, EventArgs.Empty);
    }

    private async void onLoadingTemplates(object sender, EventArgs args)
    {
        List<Template> templateList = await App.RestService.GetTemplates(App.User);

        foreach (var template in templateList)
        {
            ImageSource source = ImageSource.FromUri(new Uri("mysite.org/myapp/" + template.FileName));
            TemplateSource templateSource = new TemplateSource { Id = template.Id, Source = source };
            sourceList.Add(templateSource);
        }
    }
}

And in my XAML I use this code:

<ContentPage.Content>
    <StackLayout HorizontalOptions="Fill">
        <Frame IsClippedToBounds="True" HeightRequest="45" CornerRadius="5" Padding="0" Margin="15,15,15,0" BackgroundColor="Transparent">
            <Entry Placeholder="Search" ReturnType="Done" PlaceholderColor="Gray" x:Name="txtSearch" Margin="5,0,0,0" TextColor="White" />
        </Frame>

        <CollectionView ItemsLayout="HorizontalList" ItemsSource="{Binding sourceList}">
            <CollectionView.ItemTemplate>
                <DataTemplate>

                    <ff:CachedImage
                Source="{Binding .}"
                VerticalOptions="Center"
                HorizontalOptions="Fill" />

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

And finally in the page.xaml.cs (code behind):

protected override void OnAppearing()
{
    TemplateListViewModel vm = new TemplateListViewModel();
    BindingContext = vm;
    base.OnAppearing();
}

Now I already got help with this code from @Deczaloth, but he couldn't figure out why the CollectionView stays emtpy after I bind it. Now I already checked, but the sourceList does get filled, so thats not the problem.

What am I doing wrong?

Answer 1

I can see one potential problem in your code XD:

When you bind the Source property of CachedImage you set the binding to "." , but you should instead bind to the Source property of the TemplateSource class (in your context "." means a TemplateSource item!), that is you should change your code like so:

<ff:CachedImage
    Source="{Binding Source}"
    VerticalOptions="Center"
    HorizontalOptions="Fill" />