Xamarin.Forms - Using FFImageLoading with ListView.ImageCell

Question

I have my UWP (but also Android and IOS) dummy app that loads Simpsons characters and images into a ListView as defined below

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyContacts;assembly=MyContacts"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="MyContacts.AllContacts"
             Title="Contacts"
             BindingContext="{x:Static local:SimpsonFactory.Characters}"
             Padding="5,0,5,5">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:GenderToIndexConverter x:Key="genderCvt" />
            <local:ImageResourceConverter x:Key="imageResourceCvt" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
        <ToolbarItem 
            x:Name="tbiEdit"
            Text="Edit" 
            Priority="0"
            Icon="Assets\\circle-24.png"
            Clicked="OnEdit"/>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        <ListView 
            x:Name="lvwAllContacts"
            IsPullToRefreshEnabled="True"
            Refreshing="OnRefreshing"
            ItemsSource="{Binding .}"
            ItemTapped="OnItemTapped"
            ItemSelected="OnItemSelected">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ImageCell Text="{Binding Name}"
                               Detail="{Binding Email}"
                               DetailColor="Gray"
                               ImageSource="{Binding HeadshotUrl, Converter={StaticResource imageResourceCvt}}">
                        <ImageCell.ContextActions>
                            <MenuItem Text="Delete" Clicked="OnDelete" IsDestructive="True"/>
                        </ImageCell.ContextActions>
                    </ImageCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </ContentPage.Content>

</ContentPage>

The app consists of a simple ListView using ImageCell and it works just fine and it looks like below

The ImageCell ImageSource property is pointing to an image in Assets folder of my UWP project so it is an image added to the project but it could also be coming from an Url.

How do I change it to use FFImageLoading library with the ImageCell?

Answer 1

You cannot use the built in ImageCell then. You will have to use ViewCell and create your own replica of the ImageCell . It could look something like this:

<ViewCell>
    <Grid HeightRequest="60">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <ffimageloading:CachedImage Grid.Column="0" Margin="10" HeightRequest="40" WidthRequest="40" 
            DownsampleToViewSize="true" Source="{Binding HeadshotUrl, Converter={StaticResource imageResourceCvt}}" />

        <StackLayout VerticalOptions="Center" Grid.Column="1">
            <Label Margin="0,5,0,0" FontSize="16" Text="{Binding Name}" />
            <Label Margin="0,-5,0,5" Text="{Binding Email}" />
        </StackLayout>
    </Grid>
</ViewCell>

This is just a sample, play with it to match your needs.