Infinite items loading in Xamarin Forms FlowListView

Viewed 219

I am implementing the FlowListView NuGet package for a custom listview with multiple columns.

(NuGet package link: https://www.nuget.org/packages/DLToolkit.Forms.Controls.FlowListView/)

Everything is displayed as it should. But the app is getting very slow. On looking further in the Live Visual Tree I found out that the list items in the FlowListView are loading infinitely. I don't know what is causing it.

Can anyone tell me why it is happening, and how to stop it?

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             xmlns:vm="clr-namespace:FlowDemo.ViewModels"
             x:Class="FlowDemo.MainPage">

    <ContentPage.BindingContext>
        <vm:MainViewModel />
    </ContentPage.BindingContext>
    
    <StackLayout>
        <flv:FlowListView FlowColumnCount="2"
                          RowHeight="50"
                          SeparatorVisibility="Default"
                          HasUnevenRows="false"
                          FlowItemsSource="{Binding Items}" >

            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Frame Margin="10" Padding="0" CornerRadius="6" HasShadow="True">

                        <Label Text="{Binding}" HorizontalOptions="Center" VerticalOptions="Center" />

                    </Frame>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>

        </flv:FlowListView>
    </StackLayout>
</ContentPage>

View Model:

using System.Collections.ObjectModel;

namespace FlowDemo.ViewModels
{
    public class MainViewModel
    {
        public ObservableCollection<string> Items { get; set; } = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", };
    }
}

Code Behind:

using DLToolkit.Forms.Controls;
using Xamarin.Forms;

namespace FlowDemo
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            FlowListView.Init();
        }
    }
}

EDIT: I'm using Visual Studio 2022 and .Net Standard 2.0. I'm also using PropertyChanged.Fody for implementing INotifyPropertyChanged.

Screenshot: Click here to view image

1 Answers

The problem might be because MainPage USES FlowListView during InitializeComponent.

UPDATE Moving Init (as suggested below) did not fix.


Need to call FlowListView.Init() BEFORE use it.

You COULD do this simply by moving it earlier in MainPage constructor:

public MainPage()
{
    FlowListView.Init();
    InitializeComponent();
}

But then if you change to a different starting page, you might forget to call it. Therefore, a better place is in

App.xaml.cs:

public App()
{
    ...
    FlowListView.Init();
    ...
}
    
Related