Load an image in a listview from URI xamarin forms

Question

ok, so I have this listView which is supposed to show a bunch of items, each of which containing at least one photo.

The idea is to show the main photo in the listCell, and when an item is selected, its details are shown in a different Forms Page, and there its supposed to be able to access all its photos.

When the item doesn't have a photo, it will show a placeholder one from resources.

Problem: can't load the image from URI either binding the image source to a list property (from the viewModel) that contains the specific URI obj, or by binding it to the same property containing now strings, or by means of

<Image.Source>
     <UriImageSource Uri="{Binding MainPhotoSource}" />
</Image.Source>

no matter. none of these seems to work.

already asked the Xamarin Team for help, and their answer was to come here, or go to the forums (which I already did, been waiting for almost two months, now, and the work needs to be delivered)...

any help, please?

EDIT: Here's a piece of the ViewModel code.

In this first method, for each item I receive from the WCF, I add an equivalence in the format of this ItemDto obj to this ObservableCollection List.

// Sets this List observable collection to a new ItemDto obj,
// with certain properties from the Item.Find result[].
ObservableCollection<ItemDto> SetList(Item.Find[] result)
{
    ObservableCollection<ItemDto> collection = new ObservableCollection<ItemDto>();

    foreach (Item.Find item in result)
    {
        collection.Add(GetDto(item));
    }
    return collection;
}

// Gets a new ItemDto obj with the required fields from Item.Find obj.
ItemDto GetDto(Item.Find item)
{
    return new ItemDto()
    {
        ID = item.ID,
        UserID = item.User_ID,
        MainPhotoSource = new Uri(_serverInbox + item.MediaItems[0].RelativeUrl),
        Title = item.Title,
        Description = item.Description,
        Category = item.Category_Name,
        DateCreated = GetFormatedDateCreated(item.DateCreated)
    };
}

Answer 1

Uri property of UriImageSource requires an Uri rather than a string. But you can use a URI Bindable property in your View Model and bind to it:

Check this code

View Model

public string ProductNo
{ 
    get { return _productNo}
    set
    {
        if (_productNo != value)
        {
            _productNo = value;
            RaisePropertyChanged();
            RaisePropertyChanged(() => ThumbnailImageUri);
        }
    }
}

public Uri ThumbnailImageUri
{
    get
    {
        if (_thumbnailImageUri == null)
        {
            _thumbnailImageUri = new Uri(String.Format("http://www.YOURWEBSITE.com/{0}.jpg", _productNo));
        }
        return _thumbnailImageUri;
    }            
}

View

<StackLayout BindingContext="{Binding SelectedProduct}">
    <StackLayout Orientation="Horizontal">
      <Image HorizontalOptions="EndAndExpand"
           VerticalOptions="Center">
        <Image.Source>
          <UriImageSource Uri="{Binding ThumbnailImageUri}"/>
        </Image.Source>
      </Image>    
    <Label Text="{Binding ProductNo}"
         Font="Bold, Large"
         HorizontalOptions="StartAndExpand"
    VerticalOptions="Center"/>
    </StackLayout>
</StackLayout>

Answer 2

Here is, what works for me - hope this helps you

First my BindingContext:

public class ItemContainer
{
    public ItemContainer()
    {           
        Collection = SetList(new[] { "1", "2", "3", "4" });
    }

    ObservableCollection<ItemDto> SetList(string[] result)
    {
        ObservableCollection<ItemDto> collection = new ObservableCollection<ItemDto>();

        foreach (string item in result)
        {
            collection.Add(GetDto(item));
        }
        return collection;
    }
    public ObservableCollection<ItemDto> Collection { get; set; }
    ItemDto GetDto(string item)
    {
        return new ItemDto() { MainPhotoSource = new Uri(_serverInbox + item) }; 
    }
}

My Page1.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"
             x:Class="App1gcm.Page1">
    <ListView ItemsSource="{Binding Collection}" VerticalOptions="Center" HorizontalOptions="Center" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Image Source="{Binding MainPhotoSource}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

And I merge them on creating as MainPage in App.cs:

public App()
{
    // The root page of your application
    MainPage = new Page1
    {
        BindingContext = new ItemContainer()
    };
}