CODEWITHSUNDEEP
xamarinxamarin.forms
Nigel
Nigel

Reputation: 51

Using FFImageLoading:CachedImage in ListView

Been looking for an example online about this but can't seem to find one. Basically, i would like to use a FFImageLoading:CachedImage in a ListView with the source bound to a string with a url e.g. http://blah.com/image.jpg. This is what i have tried thus far but no image seems to be loaded.

<ListView IsVisible="true" ItemsSource="{x:Static local:viewmodel.TSViewModel.myArticles}">        
  <ListView.ItemTemplate >
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>

          <StackLayout Orientation="Vertical">

            <ffimageloading:CachedImage
                    HorizontalOptions="Center" VerticalOptions="Center"
                    WidthRequest="95" HeightRequest="95"
                    DownsampleToViewSize="true"
                    Source = "{Binding ImageUrl}">
            </ffimageloading:CachedImage>

            <Label Text="{Binding Title}" LineBreakMode="WordWrap" FontSize="Small"/>

          </StackLayout>

        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

If there is something i'm doing wrong or i'm just not supposed to use it this way or there are better alternatives, please help me out. Also, i'm a beginner with xamarin forms and mvvm. Any help would be greatly appreciated.

Update: So the images do load but only once I move away from the images page to another page then back to the images page. The images are being loaded in a content page within a tabbed page so maybe that has something to do with it. Any ideas on how to load them the first time the tabbed page is opened?

HomePage.xaml.cs

using TestApp.view;
using Xamarin.Forms;
using TestApp.database;

namespace TestApp
{
    public partial class HomePage : TabbedPage
    {
        public HomePage(TestAppDatabase db)
        {
            InitializeComponent();

            Children.Add(new Bakeries(db));
            Children.Add(new Bars());
            Children.Add(new Butcheries());
            Children.Add(new Restaurants());
            Children.Add(new Supermarkets());
            Children.Add(new Entertainment());
        }

    }
}

Bakeries.xaml.cs

using System.Collections.Generic;
using TestApp.model;
using TestApp.database;

using Xamarin.Forms;

namespace TestApp.view
{
    public partial class Bakeries : ContentPage
    {
        public Bakeries(TestApp db)
        {
            InitializeComponent();

            List<Eateries> bakeries = (List<Eateries>) db.GetBakeries();
            bakeriesList.ItemsSource = bakeries;
        }
    }
}

Upvotes: 3

Views: 5845

Answers (1)

Andres Castro
Andres Castro

Reputation: 1858

According to the API docs located here. https://github.com/molinch/FFImageLoading/wiki/Xamarin.Forms-API

You must add this line to your platform specific project (AppDelegate.cs, MainActivity.cs, etc) before you use FFImageLoading:

CachedImageRenderer.Init();

Upvotes: 3

Related Questions