Xamarin.Forms 帮助直接从视图模型从 Url/Uri 加载图像

Question

我目前正在Xamarin.Forms上开发一个跨平台的应用程序(iOS和Android( 我目前的目标是为多个服务开发一个带有图像的滑块。

像这样：

图片 | 图片 |图片 |图像

标签 | 标签 |标签 |标签

可滚动到两侧。

为此，我创建了：

-服务类

string ID
string Name
string ServiceType
ImageSource ImgUrl 

- A ViewModel (HLandingVM( 在这里，我准备列表对象并将它们加载到页面中

-HLandingPage.xaml 用于视图

-HLandingPage.cs加载视图模型

主要问题是我确实看到我的标签正确显示并按预期滚动。但是图像根本没有显示。

我尝试传递给模型： 图像源，图像本身，只传递绑定的 Uri。但是图像根本不会显示。

-类

`private string id;
public string Id
{
get { return id; }
set
{
id = value;
OnPropertyChange("Id");
}
}
private string name;
public string Name
{
get { return name; }
set
{
name = value;
OnPropertyChange("Name");
}
}
private string servicetype;
public string ServiceType
{
get { return servicetype; }
set
{
servicetype = value;
OnPropertyChange("ServiceType");
}
}

private ImageSource imgUrl;
public ImageSource ImgUrl 
{
get { return imgUrl; }
set
{
imgUrl = value;
OnPropertyChange("ImgUrl");
}
}`

-视图

'

<StackLayout Margin="10,0,5,0" WidthRequest="150" HeightRequest="150">
<Image HorizontalOptions="Start"  WidthRequest="150" HeightRequest="150" >
<Image.Source>
<UriImageSource Uri="{Binding ImgUrl}" />
</Image.Source>
</Image>
<Label Style="{StaticResource BoldLabel}" HorizontalTextAlignment="Center" FontSize="13" LineBreakMode="TailTruncation" Text="{Binding Name}" TextColor="Black"/>
</StackLayout>

'

-虚拟机

添加服务和图像源 `

Services.Add(
new Services
{
Name = "Service1",
ServiceType = "Owner",
ImgUrl = new UriImageSource()
{
Uri= new Uri("https://via.placeholder.com/150 "),
CachingEnabled = false
}
});
Services.Add(
new Services
{
Name = "Service2",
ServiceType = "Owner",
ImgUrl = new UriImageSource()
{
Uri = new Uri("https://via.placeholder.com/100 "),
CachingEnabled = false
}
});
Services.Add(
new Services
{
Name = "Service3",
ServiceType = "Owner",
ImgUrl = new UriImageSource()
{
Uri = new Uri("https://via.placeholder.com/250 "),
CachingEnabled = false
}
}); 

'

- 如果 URI 返回空，则尝试(不起作用(加载资源映像

'

foreach (var service in List)
{
if (service.ImgUrl.IsEmpty)
{
var assembly = typeof(HLandingPage);
service.ImgUrl = ImageSource.FromResource("App.Images.150.png", assembly);
}
OwnerServices.Add(service);

'

没有触发父级错误。只是空的图片。

Answer 1

首先，您可以简化Image

<Image HorizontalOptions="Start"  WidthRequest="150" HeightRequest="150" Source="{Binding ImgUrl}" />

其次，让你的ImgUrl房产成为string

Services.Add(
new Services
{
Name = "Service1",
ServiceType = "Owner",
ImgUrl = "https://via.placeholder.com/150"
});

最后，请确保您实际上没有在URL中包含尾随空格

Answer 2

一般我们通常将imgUrl定义为字符串类型，如下

private string imgUrl;
public string ImgUrl 
{
get { return imgUrl; }
set
{
imgUrl = value;
OnPropertyChange("ImgUrl");
}
}

并像这样绑定：

<Image Source="{Binding ImgUrl}" />

当然，当你初始化ImgUrl的值时，它也应该是string类型。

并且有一个示例可以显示来自互联网的图像，您可以参考它。 https://github.com/xamarin/xamarin-forms-samples/tree/master/GetStarted/Tutorials/ListViewTutorial

Answer 3

谢谢你们的帮助！

事实上，图像的字符串为souce绑定提供了诀窍。

我注意到我错过的另一个细节 正在 xaml 中设置项目源.cs

protected override void OnAppearing()
{
base.OnAppearing();
viewModel.UpdateServices();
OwnerServicesSlider.ItemsSource = viewModel.OwnerServices;
}

在此图像开始显示在第一个项目上之后

private string imgUrl;
public string ImgUrl
{
get { return imgUrl; }
set
{
imgUrl = value;
OnPropertyChange("ImgUrl");
}
}

我还将 ItemSource 添加到 xaml 中

<controls:HorizontalScrollView HeightRequest="200" 
SelectedCommand="{Binding OpenPageCommand}"
Orientation="Horizontal"  
ItemsSource="{Binding OwnerServices}"
x:Name="OwnerServicesSlider">
<controls:HorizontalScrollView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="10,0,5,0" WidthRequest="150" HeightRequest="150">
<Image HorizontalOptions="Start"  Source="{Binding ImgUrl}" WidthRequest="150" HeightRequest="150"/>
<Label Style="{StaticResource BoldLabel}" HorizontalTextAlignment="Center" FontSize="13" LineBreakMode="TailTruncation" Text="{Binding Name}" TextColor="Black"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</controls:HorizontalScrollView.ItemTemplate>
</controls:HorizontalScrollView>

我用不同的链接填充我的列表

Services.Add(
new Services
{
Name = "Service1",
ServiceType = "Owner",
ImgUrl = "http://lorempixel.com/150/150"
});
Services.Add(
new Services
{
Name = "Service2",
ServiceType = "Owner",
ImgUrl = "https://via.placeholder.com/150"
}); ;
Services.Add(
new Services
{
Name = "Service3",
ServiceType = "Owner",
ImgUrl = "https://www.stevensegallery.com/150/150"

});

https://via.placeholder.com/150 中的图像始终显示，但其他两个图像不与绑定一起显示。 我错过了什么吗？

我尝试将列表中的图像移动到第二甚至第三，但只有占位符显示在任何位置。