无法将图像绑定到 Xamarin Forms 中的 ListView

Question

I know several questions have been asked on this topic but I've not found a solution in any of them.

The fields in 'FileImageInfo' model all bind ok except the image source.

I've followed several tutorials on this and I can't see what I'm doing differently..

//code behind
var items = new List<FileImageInfo>();            
       
    for (int i = 0; i < images.Count; i++)
    {                
       items.Add(new FileImageInfo
         {
            FileType = "Jpeg",
            FileSize = 3.4,
            DateCreated = DateTime.Now,
            imageSource = "http://lorempixel.com/100/100/people/1" 
//ImageSource.FromStream(() => images[i].AsPNG().AsStream())
         });                 
    }                     
    Items.ItemsSource = items;  


//model
public class FileImageInfo
    {            
        public string FileType { get; set; }
        public double FileSize { get; set; }
        public DateTime DateCreated { get; set; }
        //public ImageSource imageSource { get; set; }
        public string imageSource;

        public FileImageInfo()
        {               
        }
    }

//Xaml

<StackLayout >
                <ListView BackgroundColor="White" x:Name="Items" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>                            
                                <StackLayout Padding="5" Orientation="Horizontal">                                        
                                    <StackLayout HorizontalOptions="StartAndExpand">
                                        <StackLayout Orientation="Horizontal">                                                
                                            <Label Text="{Binding FileType}"></Label>
                                            <Label></Label>
                                            <Label Text="{Binding FileSize}"></Label>
                                        </StackLayout>
                                        <Label Text="{Binding DateCreated}"></Label>
                                        <Image Source="{Binding imageSource}" />
                                    </StackLayout>                               
                                    <Label Text="Status" VerticalOptions="Center"></Label>                          
                                </StackLayout>                            
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

I've narrowed the issue down to this section. If I hard code a value in the images array such as images[0] it works, but when I use the iterator variable images[i] nothing is displayed

for (int i = 0; i < images.Count; i++)
        {
            items.Add(new FileImageInfo
            {
                FileType = "Jpeg",
                FileSize = 3.4,
                DateCreated = DateTime.Now,
                imageSource = ImageSource.FromStream(() => 
images[i].AsPNG().AsStream())
        });                 
        }                     
        Items.ItemsSource = items;   

Update - There is happening because there's something strange happening with the loop and I think it has something to do with the anonymous method

For example: if the for loop is: for(int i = 0; i < 1; i++) 

then then you would expect the items list to only contain one item - images[0] but weirdly the item it contains is images[1]. It's like 'i' is getting incremented and THEN passed into images[] in the anonymous method

Answer 1

Froms shared code of FileImageInfo , modify type of imageSource from string to ImageSource as follow:

public class FileImageInfo
{
    public string FileType { get; set; }
    public double FileSize { get; set; }
    public DateTime DateCreated { get; set; }
    public ImageSource imageSource { get; set; }
    //public string imageSource { set; get; }

    public FileImageInfo()
    {
    }
}

Then adding ItemSource for ListView :

for (int i = 0; i < 5; i++)
{
    items.Add(new FileImageInfo
    {
        FileType = "Jpeg",
        FileSize = 3.4,
        DateCreated = DateTime.Now,
        imageSource = ImageSource.FromUri(new Uri("https://s1.ax1x.com/2020/07/31/aQhvss.png"))
    }) ;
}
Items.ItemsSource = items;

Here I replace shared uri to mine, becasue shared uri is invalid in Image. And it will not show image as result. Suggest that using https uri.The error log as follow:

ImageLoaderSourceHandler: Could not retrieve image or image data was invalid: Uri: http://lorempixel.com/100/100/people/1/

Now the image will show:

Note: If must need to use http uri, you can use FFImageLoading Nuget Pagckage to show image.Then FileImageInfo class can use sting type for imageSource .

public string imageSource { set; get; }

Then add data:

for (int i = 0; i < 5; i++)
{
    items.Add(new FileImageInfo
    {
        FileType = "Jpeg",
        FileSize = 3.4,
        DateCreated = DateTime.Now,
        imageSource = "https://s1.ax1x.com/2020/07/31/aQhvss.png"
    }) ;
}

Used in Xaml:

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

<ffimageloading:CachedImage HorizontalOptions="Center"
                            VerticalOptions="Center"
                            DownsampleToViewSize="true"
                            Source="{Binding imageSource}"/>