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)

1

@jzeferino Got it, thanks!! – Dan M Dec 04 '16 at 14:58

score 11 · Accepted Answer · answered Nov 13 '16 at 22:46

11

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; }

answered Nov 13 '16 at 22:46

jzeferino

7,700
1
39
59

Atif · Answer 2 · 2019-11-04T18:59:08.450

1

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.

edited Nov 04 '19 at 18:59

answered Nov 15 '18 at 23:31

Atif

1,438
16
25

Could you elaborate on your last paragraph as I seem to be having this issue as described here: https://stackoverflow.com/questions/58312494/image-not-appearing-on-mac-images-does-appear-on-pc +1. – w0051977 Oct 11 '19 at 09:11
Just something we realized while I was working on a contract project out of Chicago. Most of the other members of the team were dumbfounded that the same code worked on their windows machines but failed reliably on the mac. Turned out to be a bug of some sort. This was the case in 2018, so a newer version of Xamarin may have corrected the bug. – Atif Nov 04 '19 at 18:57
@w0051977 I don't believe its the same issue, since you aren't using https/TLS. Personally I'd stick to Xamarin primarily on windows, or use another framework. Maybe run windows in a vm on the mac? – Atif Nov 04 '19 at 19:04

Bind Image to URL Xamarin Forms XAML

XAML:

View Model:

2 Answers2

Linked