Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

ListView not working with list of images in code behind

Ryn9011Ryn9011 Member ✭✭
edited August 12 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

XAML:

   <ListView BackgroundColor="White" x:Name="Items" HasUnevenRows="True">
     <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>                            
                                <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></Label>
                                            <Label Text="{Binding FileSize}"></Label>
                                        </StackLayout>
                                        <Label HorizontalOptions="CenterAndExpand" Text="{Binding DateCreated}"></Label>                                            
                                    </StackLayout>                               
                                    <Label HorizontalOptions="End" Text="Status" VerticalOptions="Center"></Label>                          
                                </StackLayout>                            
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>  

CODE BEHIND:

        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

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited August 12

    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 13

    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.