Bind Image to URL Xamarin Forms XAML

Question

I am having trouble binding an Image to a UriImageSource using Xamarin Forms.

I have implemented the FlowListView which presents a grid-like list of text but the images associated with each product aren't appearing.

Has anyone else had this/know how to work around it?

XAML:

<flv:FlowListView 
    Grid.Row="1" 
    x:Name="flvListView" 
    SeparatorVisibility="None" 
    HasUnevenRows="true" 
    FlowColumnMinWidth="110">
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Grid Padding="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image HeightRequest="100" >
                    <Image.Source>
                        <UriImageSource Uri="{Binding ProductImage}" />
                    </Image.Source>
                </Image>
                <Label 
                    x:Name="Label" 
                    HorizontalOptions="Fill" 
                    HorizontalTextAlignment="Center" 
                    VerticalOptions="End" 
                    BackgroundColor="Silver"
                    Opacity="0.5" Text="{Binding ProductName}"/>
            </Grid>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

View Model:

public class vmProduct
{
    public vmProduct() { }
    /* removed other properties, constructors etc */
    public UriImageSource ProductImage { get; set; }
    public string ProductName { get; set; }
}

When the vmProduct is initialised

this.Products.Add(new vmProduct
{
    ProductName = "Test",
    ProductImage = new UriImageSource
    {
        Uri = new Uri("https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg")
    }
});

(In the above example, "Test" will appear but the image will not)

Answer 1

Since you are binding the UriImageSource to a Uri your ViewModel property must be a Uri to.

Change public UriImageSource ProductImage { get; set; } to public Uri ProductImage { get; set; }

Answer 2

Had the same issue, and I don't know if this has changed, but I found you can bind strait to the image source as follows:

<Image HeightRequest="200" Source="{Binding ProductImage}"/>

And then on the code behind, you can use a var, and let C# do the proper cast:

   public ImageSource ProductImage {
        get {
            var source =  new Uri("http://myurl.com/one.jpg");
            return source;
        }
    }

What I like about this, is if you want to get your code working with a image in the resource, we just change the source line like so:

    public ImageSource ProductImage {
        get {
            var source = "resource_image.png"
            return source;
        }
    }

One thing to keep in mind, there appears to be an issue (as of 2018) with loading images over TLS (https url) in Xamarin on MacOS, so I recommend sticking to http or building on windows.