将图像绑定到 URL Xamarin 表单 XAML

Question

我在使用 Xamarin 表单将图像绑定到 UriImageSource 时遇到问题。

我已经实现了 FlowListView，它显示了一个类似网格的文本列表，但与每个产品关联的图像没有出现。

其他人有这个/知道如何解决它吗？

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>

查看模型：

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

vmProduct 初始化时

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

（在上面的例子中，“测试”会出现，但图像不会）

Answer 1

由于您将 UriImageSource 绑定到 Uri 您的 ViewModel 属性必须是一个 Uri。

将public UriImageSource ProductImage { get; set; } 更改为public Uri ProductImage { get; set; }

Answer 2

遇到了同样的问题，不知道有没有改变，但是我发现你可以将strait绑定到图像源，如下所示：

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

然后在后面的代码中，您可以使用 var，并让 C# 进行正确的转换：

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

我喜欢这个，如果你想让你的代码使用资源中的图像，我们只需像这样更改源代码行：

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

请记住，在 MacOS 上的 Xamarin 中通过 TLS（https url）加载图像似乎存在问题（截至 2018 年），因此我建议坚持使用 http 或在 windows 上构建。