Forum Xamarin.Forms


The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

ListView not working with list of images in code behind

Ryn9011Ryn9011 Member ✭✭
edited August 2020 in Xamarin.Forms

I have a listView bound to a list in the code behind. The model contains 4 items of data, one of which is an image. All of the items display correctly except the image (which is blank) and I need help figuring out why.

If in the for loop I limit it to just one iteration i.e. i < 1 then displaying a single image works. It's just when I try to display more than one that the image are blank


   <ListView BackgroundColor="White" x:Name="Items" HasUnevenRows="True">
                                <StackLayout Padding="5" Orientation="Horizontal">
                                    <Image Source="{Binding imageSource}" HorizontalOptions="Start" WidthRequest="70" HeightRequest="50" />
                                    <StackLayout HorizontalOptions="CenterAndExpand">                                      
                                        <StackLayout VerticalOptions="Center" Orientation="Horizontal">                                                
                                            <Label Text="{Binding FileType}"></Label>
                                            <Label Text="{Binding FileSize}"></Label>
                                        <Label HorizontalOptions="CenterAndExpand" Text="{Binding DateCreated}"></Label>                                            
                                    <Label HorizontalOptions="End" Text="Status" VerticalOptions="Center"></Label>                          


        FileModel fileModel = DependencyService.Get<IImageFetcher>().ReadImagesAsync();

        var items = new List<FileImageInfo>();
        for (int i = 0; i < fileModel.Images.Count; i++)
            var imageStream = ImageSource.FromStream(() => new MemoryStream(fileModel.Images[i]));
            items.Add(new FileImageInfo
                FileType = "Jpeg",
                FileSize = fileModel.Sizes[i],
                DateCreated = fileModel.Dates[i],
                imageSource = imageStream
        Items.ItemsSource = items;

Best Answer


  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited August 2020

    Try to add a breakpoint to debug to check if the got source is null.

    for (int i = 0; i<fileModel.Images.Count; i++)
        var source = ImageSource.FromStream(() => new MemoryStream(fileModel.Images[i]));
        myImage.Source = source;
        items.Add(new FileImageInfo

    Add I test a basic demo about the function, it works fine when loading the png file. But the jpg files could not be loaded, try to convert the images files to png format.

  • Ryn9011Ryn9011 Member ✭✭

    At the moment there are 2 images in the list. It will display each image individually if I hard code the list e.g. image[0] or images[1], they display fine and so I don't think the image type is the issue. It's only when I use images[i] that they don't display

  • Ryn9011Ryn9011 Member ✭✭
    edited August 2020

    The above works indicating the issue the for loop itself.

    I think the issue is: after the loop has finished, it increments the counter one last time e.g. if the condition is i<2, it will increment to 2 before exiting the loop. The images list will then try to use the value images[2] which doesn't exist. I've no idea how to prevent this though

  • Ryn9011Ryn9011 Member ✭✭

    Thanks for your answer - using a foreach instead of a For loop did the trick. Weird that a for loop wont work with this though..

Sign In or Register to comment.