Xamarin.Forms 帮助直接从 viewmodel 从 Url/Uri 加载图像答案

【问题标题】：Xamarin.Forms Help loading Images from Url/Uri directly from viewmodelXamarin.Forms 帮助直接从 viewmodel 从 Url/Uri 加载图像
【发布时间】：2019-08-13 21:18:02
【问题描述】：

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

类似：

图片 |图片 |图片 |图片

标签 |标签 |标签 |标签

可滚动到两侧。

为此我创建了：

-服务类

string ID
string Name
string ServiceType
ImageSource ImgUrl

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

-HLandingPage.xaml 用于视图

-HLandingPage.cs 加载视图模型

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

我尝试传递给模型：一个 ImageSource ， Image 本身，只为绑定传递一个 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);

没有触发明显的错误。只是空的图片。

【问题讨论】：

标签： forms image xamarin uri viewmodel

【解决方案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"
  });

最后，请确保您的网址中实际上没有包含尾随空格

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

谢谢大家的帮助！

确实，图像的字符串可以实现源绑定。

我注意到的另一个我遗漏的细节在 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 的图像始终显示，但其他两个未通过绑定显示。是不是缺少什么东西？

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

【讨论】：