Xamarin: From list of urls to populating a CollectionView with Images

Question

I cannot figure out how this is done. I have a page with a Collection view and Image inside of each cell. I do also have a list of URLs, each one pointing to a jpg. What I would like to do is display each jpg in one of those cells.

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

So far It looks to me that i have to make a class, called UrlCollection, and one item inside that class ist the ImageUrl. But i feel lost and cannot find a example to follow.

UPDATE My current version. its not working, the display is simply blank.

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

        }
    }
}

Main page call:

        MainPage = new NavigationPage(new Gallery());

Answer 1

First create a Model and ViewModel and populate a ViewModel property with a List of Model object.

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

Set a ViewModel containing the UriCollection as BindingContext to the Page

MainPage.Xaml.cs

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

Usage in Xaml

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