Xamarin Forms (Xaml) ListView not displaying images

Question

My XAML looks like this:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="MyApp.Mobile.MyPage">
<ContentPage.Content>
    <StackLayout>
        <Image Source="http://MyUrl/MyImage.png" />  <!-- WORKS -->
        <ListView ItemsSource="{Binding Cells}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding RowName}" />
                            <Label Text="{Binding ColumnName}" />
                            <Image Source="http://MyUrl/MyImage.png" /> <!-- DOES NOT WORK-->
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

Xamarin Forms (testing on Android) The first image displays fine. The very same image in the ListView does not display. Ultimately I will using a Binding like the Labels (which work), but I have hard coded the URL as I diagnose the issue.

Does anyone know why the Image is not displaying in the ListView?

Answer 1

Try like below,

<ListView 
            HasUnevenRows="True"
            ItemsSource="{Binding Cells}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical">
                            <Label Text="{Binding RowName}" />
                            <Label Text="{Binding ColumnName}" />
                            <Image Source="http://xamarin.com/content/images/pages/index/hero.jpg" />
                            <!-- DOES NOT WORK-->
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

It is working checked at my end.

Happy Coding..

Kishore Kumar Vangala.

Answer 2

I higly suggest to use FFImageLoading when dealing with images in listview. The performance gain and optimized memory consumption is huge! Github | Nuget

Then in listview, in order to avoid issues with cell sizing, is better to specify HeightRequest and WidthRequest to your Image, then use an Aspect that fits your need (AspectFit, AspectFill, ecc...)

Just tested now and everything is working without issues.