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());
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.sstatic.net/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>