Xamarin：从 url 列表到使用图像填充 CollectionView

Question

我不知道这是怎么做到的。我在每个单元格内都有一个带有集合视图和图像的页面。 我也有一个 URL 列表，每个 URL 都指向一个 jpg。我想做的是在其中一个单元格中显示每个 jpg。

<StackLayout Margin="20">
    <CollectionView ItemsSource="{Binding UrlCollection}">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"
                    Span="2" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding ImageUrl}"
                   Aspect="AspectFill" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

到目前为止，在我看来，我必须创建一个名为 UrlCollection 的类，并且该类中的一个项目是 ImageUrl。但是我感到迷茫，找不到可以效仿的例子。

更新我当前的版本。它不工作，显示只是空白。

图库.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:vm="clr-namespace:GalShare.ViewModel"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="GalShare.Views.Gallery">
<ContentPage.BindingContext>
    <vm:GalleryViewModel/>
</ContentPage.BindingContext>
<StackLayout>
    <CollectionView ItemsSource="{Binding Gallery}">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"
                    Span="2" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>

                <Image Source="{Binding ImageUrl}"
                   Aspect="AspectFit" />

            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

图库.cs

 using System;
 using System.Collections.Generic;
 using System.Text;

 namespace GalShare.Model
 {
 class Gallery
 {
    public string ImageName { get; set; }
    public string ImageUrl { get; set; }
 }
 }

GalleryService.cs

    using GalShare.Model;
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Text;

    namespace GalShare.Service
    {
        class GalleryService
        {
            public ObservableCollection<Gallery> GetImageList()
            {
                return new ObservableCollection<Gallery>()
                {
                    new Gallery() { ImageName="Image1", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_0992-Edit_a.jpg"},
                    new Gallery() { ImageName="Image2", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_1024-Edit_a.jpg"},
                    new Gallery() { ImageName="Image3", ImageUrl="https://www.igormasin.it/fileuploads/tanja_23a6id/IMG_1074-Edit_a.jpg"}
                };
            }
        }
    }

GalleryViewModel.cs

using GalShare.Model;
using GalShare.Service;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;

namespace GalShare.ViewModel
{
    class GalleryViewModel
    {
        public ObservableCollection<Gallery> Images { get; set; }
        public GalleryViewModel()
        {

                Images = new GalleryService().GetImageList();

        }
    }
}

主页调用：

        MainPage = new NavigationPage(new Gallery());

Answer 1

首先创建一个模型和视图模型，并使用模型对象列表填充视图模型属性。

public class ViewModel
{
    public ObservableCollection<ImageData> UriCollection { get; set; }

    public ViewModel()
    {
        UriCollection = new ObservableCollection<ImageData>();
        for(var i=0; i<10; i++)
        {
            UriCollection.Add(new ImageData()
            {
                ImgeUri = "https://i.stack.imgur.com/di65V.jpg?s=328&g=1" 
            };
        }
    }
}

public class ImageData
{
    public string ImgeUri { get; set; }
}

将包含UriCollection 的ViewModel 设置为页面BindingContext

MainPage.Xaml.cs

public MainPage()
{
    InitializeComponent();
    this.BindingContext = new ViewModel();
}

在 Xaml 中的使用

<CollectionView ItemsSource="{Binding UriCollection}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Image Aspect="AspectFit" Source="{Binding ImgeUri}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>