CODEWITHSUNDEEP
xamllistviewxamarin.forms
Rob L
Rob L

Reputation: 2372

Xamarin Forms (Xaml) ListView not displaying images

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?

Upvotes: 0

Views: 1053

Answers (2)

GiampaoloGabba
GiampaoloGabba

Reputation: 1458

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.

Upvotes: 0

KiShOrE
KiShOrE

Reputation: 925

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.

Upvotes: 3

Related Questions