时间戳

首页 > 解决方案 > 将uri列表绑定到图像的集合视图

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

我有这个片段：

var images = await FetchMediaService.CallImagesEndpoint();
ImagesList = images;

它将来自后端的数据设置为 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？

标签： c#xamarinxamarin.forms

解决方案

首先，我们需要为 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 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; }
}

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

http://bsubramanyamraju.blogspot.com/2017/04/xamarinforms-sumption-rest-webserivce_17.html

推荐阅读