[英]Xamarin.Forms Help loading Images from Url/Uri directly from viewmodel
我目前正在Xamarin.Forms上开发跨平台应用程序(iOS和Android),我目前的目标是开发一个带有图像的滑块以用于多种服务。
就像是:
图像| 图像| 图像| 图片
标签| 标签| 标签| 标签
滚动到侧面。
为此,我创建了:
-服务类
string ID
string Name
string ServiceType
ImageSource ImgUrl
-A ViewModel(HLandingVM)在这里,我准备列表对象并将它们加载到页面中
-HLandingPage.xaml用于视图
-HLandingPage.cs加载视图模型
主要问题是我确实看到标签正确显示并按预期滚动。 但是图像根本没有显示。
Ive尝试传递给模型:ImageSource,Image本身,仅传递Binding的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);
`
没有明显的错误触发。 只是空白图片。
首先,您可以简化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"
});
最后,请确保您实际上未在网址中包含尾随空格
通常,我们通常将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
谢谢你们的帮助!
的确,图像的字符串确实可以实现源绑定。
我遗漏的另一个细节是我注意到在xaml.cs中设置ItemsSource
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的图像始终显示,但其他两个不与绑定一起显示。 我有什么想念的吗?
我尝试将列表中的图像移动到第二或什至第三,但仅占位符显示在任何位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.