Issue displaying images with FlowListView & FFImageLoading in Xamarin.Forms

Question

In XAML & C# using Xamarin.Forms (iOS Project) I'm trying to create a gallery where the user can add photos to it. Currently I can show a list that does have the photo data binded to each entry because the user can click on an item in the list and the correct image will show up.. However I have not been successful in actually displaying a smaller version of the pictures in my FlowListView. I know it has to be something with the binding and I'm trying to grab the image uri from each object to display it but I'm still pretty new to this, especially to xaml and haven't been successful with this part yet.

If you could point me in the right direction that would be sweet!

Expected Result To display images in 2 columns using FlowListView and FFImageLoading

Actual Result I currently an able to display a 2 column list that has the right objects tied to each item but the only way I can actually see if anything is there is if I add a frame or add a text label to each item.

The user can click on each label currently and the correct image will show.

This is part of my TicketPageModel

private void AddItems()
        {
public void UpdatePhotosData()
        {
            //get the notes and set the source for the list to them.
            photos = NLTicketPhotos.Get(_ticket).OrderByDescending(x => x.PhotoCreatedAt).ToList();
        }
            foreach (var i in photos)
            {
                Items.Add(i);
            }
        }

private ObservableCollection<NLTicketPhoto> _items = new ObservableCollection<NLTicketPhoto>();

public ObservableCollection<NLTicketPhoto> Items
        {
            get
            {
                return _items;
            }
            set
            {
                if (_items != value)
                {
                    _items = value;
                    OnPropertyChanged(nameof(Items));
                }
            }
        }

My XAML

<flv:FlowListView FlowColumnCount="2" SeparatorVisibility="Default" HasUnevenRows="True" FlowItemTapped="OnImageTapped" FlowItemsSource="{Binding Items}">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <StackLayout Padding="10" Spacing="0" AutomationProperties.Name="Too Cool">
                        <ff:CachedImage Aspect="AspectFill" HeightRequest="30">
                            <ff:CachedImage.Source>
                                <UriImageSource Uri="{Binding Items.PhotoFileUrl}"/>
                            </ff:CachedImage.Source>
                        </ff:CachedImage>
                        <StackLayout Orientation="Horizontal" Padding="10" Spacing="0">
                            <Label HorizontalOptions="Fill" VerticalOptions="Fill" TextColor="Black" XAlign="Center" YAlign="Center" Text="Too Cool For School"/>
                        </StackLayout>
                    </StackLayout>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>

My Code Behind

void OnImageTapped(object sender, ItemTappedEventArgs e)
        {
            NLTicketPhoto photo = (NLTicketPhoto)e.Item;
            //listPhotos.SelectedItem = null; //deselect the item

            switch (photo.PhotoFileType)
            {
                case "mov":
                    if (photo.PhotoIsOnServer)
                    {
                        Device.OpenUri(new Uri(photo.PhotoFileName));
                    }
                    else
                    {
                        //Only watch videos after sync
                        DisplayAlert("Video Unavailable", string.Format("This video will be viewable after it is synced to the server."), "OK");
                    }
                    break;

                case "jpg":
                    //View image
                    NLPageViewPhoto preview = new NLPageViewPhoto(photo);
                    Navigation.PushAsync(preview);
                    break;
                default:
                    DisplayAlert("Photo Unavailable", string.Format("The photo format .{0} is currently not viewable", photo.PhotoFileType), "OK");
                    break;
            }

        }

Answer 1

Once I implemented INotifyPropertyChanged to my NLTicketPhoto model and tweaked my PhotoUrl and PhotoDescription properties to use OnPropertyChanged() I was able to get my list to display properly.

Following this example helped me. https://www.c-sharpcorner.com/article/grid-view-in-xamarin-forms-using-flowlistview/