C# 将URI列表绑定到图像集合视图

我有一个从后端检索的图像的对象数据列表

响应的格式与此类似：

images={[0]：{AbsoluteUri:https://foo.bar/image.jpg}，[1]：{AbsoluteUri:https://foo.bar/image-banana.jpg“}

其中，images包含一组具有图像属性数据的图像

我设置了这两个属性：

        public ObservableCollection<Uri> ImagesList
        {
            get => imagesList;
            set
            {
                if (imagesList == value)
                    return;

                imagesList = value;
                OnPropertyChanged(nameof(ImagesList));
            }
        }

它将来自后端的数据设置为ImagesList属性

但我对XAML绑定在这里的工作方式感到困惑：

<Grid x:Name="layout">
        <CollectionView x:Name="cv" BackgroundColor="LightGray" ItemsSource="{Binding ImagesList}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout 
                    SnapPointsAlignment="Start" 
                    SnapPointsType="MandatorySingle"
                    Orientation="Horizontal"
                    ItemSpacing="{Binding Source={x:Reference mainPage}, Path=HingeWidth}" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame BackgroundColor="LightGray" Padding="0" Margin="0" 
                           WidthRequest="{Binding Source={x:Reference mainPage}, Path=ContentWidth}"
                           HeightRequest="{Binding Source={x:Reference mainPage}, Path=ContentHeight}">
                        <Frame Margin="20" BackgroundColor="White">
                          <Image
                                   Source="{Binding AbsoluteUri}" //What should this bind to? 
                                   Aspect="AspectFill" />
                        </Frame>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

---

我将ImagesList添加到CollectionView的ItemsSource中，但我不确定如何在集合中的每个图像上设置从服务器返回的单个uri。如何正确设置ImageUri？

首先，我们需要为JSON响应字符串生成C#.net类

 public class imageurl
{
    public string AbsoluteUri { get; set; }
}

其次，通过Nuget包安装“Newtonsoft.Json”解析Json字符串

最后，编写下面的代码来解析上面的JSON响应

   public async void GetJSON()
    {
        var response = await client.GetAsync("REPLACE YOUR JSON URL");
        string stringJson = await response.Content.ReadAsStringAsync();

        urls= JsonConvert.DeserializeObject<List<imageurl>>(stringJson);
    }

public异步void GetJSON（）
{
var response=await client.GetAsync（“替换JSON URL”）；
string stringJson=await response.Content.ReadAsStringAsync（）；
URL=JsonConvert.DeserializeObject（stringJson）；
}

这里的全部代码

public partial class Page21 : ContentPage, INotifyPropertyChanged
{
    private List<imageurl> _urls;

    public List<imageurl> urls
    {
        get { return _urls; }
        set
        {
            _urls = value;
            RaisePropertyChanged("urls");

        }
    }


    public Page21()
    {
        InitializeComponent();

        urls = new List<imageurl>();

        GetJSON();

        this.BindingContext = this;
    }

    public async void GetJSON()
    {
        var response = await client.GetAsync("REPLACE YOUR JSON URL");
        string stringJson = await response.Content.ReadAsStringAsync();

        urls= JsonConvert.DeserializeObject<List<imageurl>>(stringJson);
    }

    public event PropertyChangedEventHandler PropertyChanged;    
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
public class imageurl
{
    public string AbsoluteUri { get; set; }
}

public分部类Page21:ContentPage，INotifyPropertyChanged
{
私有列表(url),；
公共列表URL
{
获取{return\u url；}
设置
{
_URL=值；
RaisePropertyChanged（“URL”）；
}
}
公共页21（）
{
初始化组件（）；
URL=新列表（）；
GetJSON（）；
this.BindingContext=this；
}
公共异步void GetJSON（）
{
var response=await client.GetAsync（“替换JSON URL”）；
string stringJson=await response.Content.ReadAsStringAsync（）；
URL=JsonConvert.DeserializeObject（stringJson）；
}
公共事件属性更改事件处理程序属性更改；
public void RaisePropertyChanged（字符串propertyName）
{
PropertyChangedEventHandler处理程序=PropertyChanged；
if（处理程序！=null）
{
处理程序（这是新的PropertyChangedEventArgs（propertyName））；
}
}
}
公共类imageurl
{
公共字符串绝对URI{get；set；}
}

有一篇文章是关于这一点的，你可以看看：

---

如果

ImagesList

是

Uri

对象的集合，那么您可能希望绑定到

AbsoluteUri

属性。@Jason您是对的，它是相同的值。这两种方式都无所谓。如何确保它绑定到图像源中的单个Uri？我不知道您的意思。您当前正在绑定到图像Uri，它不是Uri类的属性（除非您使用自己的Uri类而不是System.Net），ImageUri只是我编造的字符串属性。好的，让我们退一步说，我忘记了使用ImageUrl。如何正确绑定它？请阅读我的第一条评论-使用绝对Uri

public partial class Page21 : ContentPage, INotifyPropertyChanged
{
    private List<imageurl> _urls;

    public List<imageurl> urls
    {
        get { return _urls; }
        set
        {
            _urls = value;
            RaisePropertyChanged("urls");

        }
    }


    public Page21()
    {
        InitializeComponent();

        urls = new List<imageurl>();

        GetJSON();

        this.BindingContext = this;
    }

    public async void GetJSON()
    {
        var response = await client.GetAsync("REPLACE YOUR JSON URL");
        string stringJson = await response.Content.ReadAsStringAsync();

        urls= JsonConvert.DeserializeObject<List<imageurl>>(stringJson);
    }

    public event PropertyChangedEventHandler PropertyChanged;    
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
public class imageurl
{
    public string AbsoluteUri { get; set; }
}