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

Have you set the BindingContext to a ViewModel class. If yes please add the ViewModel class to query. — Nikhileshwar, Mar 17 '20 at 10:27
@Nikhileshwar , you mentioned in chat that the Interface might lock up, could you please have a look at this? https://stackoverflow.com/questions/60804577/xamarin-asynchronous-data-binding thank you — sharkyenergy, Mar 22 '20 at 21:55

Nikhileshwar · Accepted Answer · 2020-03-17T13:05:49.570

0

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>

edited Mar 17 '20 at 13:05

answered Mar 17 '20 at 10:43

Nikhileshwar

1,666
1
11
26

@Nikhiileshwar Thank you for your answer.. I tried to adapt my code to your sugestion, but its not working for me. I updated the main post with my current code. Could you also please explain how the "new iamgedata()...:" could be implemented in a for loop? – sharkyenergy Mar 17 '20 at 12:22
1

Replace `Gallery` to `Images` in the ItemsSource `Binding`. And check if it works – Nikhileshwar Mar 17 '20 at 12:30
@sharkyenergy Are you using any MVVM nuget?? Are you setting the BindingContext to Gallery View somewhere? – Nikhileshwar Mar 17 '20 at 12:32
Changing gallery to Images fixed.. it works now. thank you! Could you please just explain how to do the for loop? – sharkyenergy Mar 17 '20 at 12:46
Just use `Images.Add(new Gallery())` (referring your code). I'll update my answer above. However since you are getting all data from Service at once why are you going for the `for` loop – Nikhileshwar Mar 17 '20 at 12:54
I would need the for loop inside the service.. i manually typed 3 images just for test, but in the final prog i will get a list of urls from the webserver, that need to be loaded intot he gallery.. – sharkyenergy Mar 17 '20 at 13:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209774/discussion-between-nikhileshwar-and-sharkyenergy). – Nikhileshwar Mar 17 '20 at 13:04

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

1 Answers1