Xamarin: от списка URL-адресов до заполнения CollectionView с изображениями

Question

Я не могу понять, как это делается. У меня есть страница с представлением коллекции и изображения внутри каждой ячейки. У меня также есть список 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, и один элемент внутри этого класса URL изображения. Но я чувствую себя потерянным и не могу найти пример для подражания.

ОБНОВЛЕНИЕ Моя текущая версия. он не работает, дисплей просто пустой.

Gallery.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>

Gallery.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

Сначала создайте Model и ViewModel и заполните свойство ViewModel объектом List of Model.

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

Установить ViewModel, содержащий UriCollection как 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>