After changing my Implementation from MAUI CollectionView to mpowerkit:VirtualizeListView, the page is blank?

[Sebastian1989101]

I'm not sure what I missed or if I'm just blind, while trying our your library it just stays blank. I have added .UseMPowerKitListView() in my MauiProgram.cs. After that, I changed only my XAML implementation (using 2.7.1 of your library):

This is my current code behind for that page:

using CommunityToolkit.Maui.Core.Extensions;
using TearsCompanion.Models.Settings;
using TearsCompanion.ViewModels;

namespace TearsCompanion.Pages;

public partial class ArmorPage
{
    public ArmorPage(IAppSettings appSettings) 
        : base(appSettings)
    {
        InitializeComponent();
        ContentCollection.SetBinding(ItemsView.ItemsSourceProperty, ViewModel.PageSettings.GroupEntries ? nameof(ViewModel.Data) : nameof(ViewModel.UngroupedData));
    }

    protected override void ViewModelWasSet()
    {
        base.ViewModelWasSet();
        ViewModel.PageSettings.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == nameof(ArmorViewModel.PageSettings.GroupEntries))
                ContentCollection.SetBinding(ItemsView.ItemsSourceProperty, ViewModel.PageSettings.GroupEntries ? nameof(ViewModel.Data) : nameof(ViewModel.UngroupedData));
        };
    }

    private void OnSizeChanged(object? sender, EventArgs e)
    {
        if (!ContentCollection.Width.IsZeroOrNaN())
        {
            var columns = Convert.ToInt32(Math.Floor(ContentCollection.Width / 340f));
            MainThread.BeginInvokeOnMainThread(() => CollectionGridLayout.Span = columns > 1 ? columns : 1);
        }
    }

    public override void Dispose()
    {
        base.Dispose();
        CustomTitle?.Dispose();
    }
}

And this is my current XAML:

<?xml version="1.0" encoding="utf-8"?>
<base:AdMobBaseContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                           xmlns:base="clr-namespace:TearsCompanion.Pages.Base"
                           xmlns:viewModels="clr-namespace:TearsCompanion.ViewModels"
                           xmlns:extensions="clr-namespace:TearsCompanion.Extensions"
                           xmlns:converters="clr-namespace:TearsCompanion.Converters"
                           xmlns:controls="clr-namespace:TearsCompanion.Controls"
                           xmlns:data="clr-namespace:TearsCompanion.Models.Data"
                           xmlns:res="clr-namespace:TearsCompanion.Resources;assembly=TearsCompanion.Resources"
                           xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
                           xmlns:mpowerkit="clr-namespace:MPowerKit.VirtualizeListView;assembly=MPowerKit.VirtualizeListView"
                           x:Class="TearsCompanion.Pages.ArmorPage" x:TypeArguments="viewModels:ArmorViewModel"
                           Title="{extensions:AppTranslate ArmorPage_Title}" x:DataType="viewModels:ArmorViewModel"
                           x:Name="ContentPage">
    
    <ContentPage.Resources>
        <converters:EmptyToVisibilityConverter x:Key="EmptyToVisibilityConverter" /> 
        <converters:BooleanToObjectConverter x:TypeArguments="x:Double" x:Key="IsGroupedToGroupHeaderHeightConverter" TrueValue="42" FalseValue="0" />
        
        <converters:BooleanToObjectConverter x:Key="BooleanToColorConverter" TrueValue="{StaticResource ActiveColor}" FalseValue="{StaticResource DefaultTextColor}" />
        <converters:BooleanToObjectConverter x:Key="BooleanToFontAttributeConverter" TrueValue="{x:Static FontAttributes.Bold}" FalseValue="{x:Static FontAttributes.None}" />
        
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="{DynamicResource DarkBackgroundColor}" />
            <Setter Property="TextColor" Value="{DynamicResource DefaultTextColor}" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="WidthRequest" Value="42" />
            <Setter Property="MinimumHeightRequest" Value="24" />
            <Setter Property="HeightRequest" Value="32" />
        </Style>
    </ContentPage.Resources>
    
    <Shell.TitleView>
        <controls:CustomTitleView x:Name="CustomTitle" Title="{extensions:AppTranslate ArmorPage_Title}" Type="DoneSearch" SearchText="{Binding Filter}"
                                  SearchCommand="{Binding SearchCommand}" SettingsCommand="{Binding ShowSettingsCommand}" />
    </Shell.TitleView>

    <mpowerkit:VirtualizeListView x:Name="ContentCollection" IsGrouped="{Binding PageSettings.GroupEntries}" SizeChanged="OnSizeChanged">
        <mpowerkit:VirtualizeListView.ItemsLayout>
            <mpowerkit:GridLayout x:Name="CollectionGridLayout" />
        </mpowerkit:VirtualizeListView.ItemsLayout>
        <mpowerkit:VirtualizeListView.GroupHeaderTemplate>
            <DataTemplate x:DataType="data:ArmorSet">
                <Grid Margin="0" ColumnDefinitions="10,*,Auto,Auto,10" ColumnSpacing="6" BackgroundColor="{DynamicResource DarkerBackgroundColor}"
                      HeightRequest="{Binding ViewModel.PageSettings.GroupEntries, Source={x:Reference ContentPage}, Converter={StaticResource IsGroupedToGroupHeaderHeightConverter}}"
                      IsVisible="{Binding ViewModel.PageSettings.GroupEntries, Source={x:Reference ContentPage}}"
                      Padding="{Binding SafeAreaInsetsLeftRight, Mode=OneWay, Source={x:Reference ContentPage}}">
                    <Label Grid.Column="1" Text="{Binding Set, Mode=OneTime}" FontAttributes="Bold" VerticalOptions="Center" />

                    <Button Grid.Column="2" Text="-" Command="{Binding ViewModel.DowngradeSetCommand, Source={x:Reference ContentPage}}" CommandParameter="{Binding}" VerticalOptions="Center" />
                    <Button Grid.Column="3" Text="+" Command="{Binding ViewModel.UpgradeSetCommand, Source={x:Reference ContentPage}}" CommandParameter="{Binding}" VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </mpowerkit:VirtualizeListView.GroupHeaderTemplate>
        <mpowerkit:VirtualizeListView.ItemTemplate>
            <DataTemplate x:DataType="data:Armor">
                <mpowerkit:VirtualizeListViewCell>
                    <Border MaximumWidthRequest="340" HorizontalOptions="Fill" Margin="8" Padding="6,10,10,10">
                        <Grid ColumnSpacing="4" ColumnDefinitions="72, *">
                            <Grid Grid.Column="0" RowDefinitions="Auto,Auto,Auto" RowSpacing="6" VerticalOptions="Start">
                                <Image Grid.Row="0" Source="{Binding Image, Mode=OneTime, Converter={StaticResource DatabaseImageSourceConverter}}" 
                                       WidthRequest="64" HeightRequest="64" Margin="4,16,4,4" />
                                
                                <Image Grid.Row="1" Source="{Binding RequireIcon, Mode=OneTime}" WidthRequest="42" HeightRequest="25" HorizontalOptions="Center" 
                                       IsVisible="{Binding RequireIcon, Converter={StaticResource EmptyToVisibilityConverter}, Mode=OneWay}" />

                                <Border Grid.Row="2" BackgroundColor="{DynamicResource DarkerBackgroundColor}" Stroke="{DynamicResource DarkerBackgroundColor}"
                                        Margin="8.4" Padding="4,8" HeightRequest="40" HorizontalOptions="Fill" 
                                        IsVisible="{Binding MapEntry, Converter={StaticResource EmptyToVisibilityConverter}, Mode=OneTime}">
                                    <Border.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding ViewModel.NavigateToMapCommand, Source={x:Reference ContentPage}}"
                                                              CommandParameter="{Binding}" />
                                    </Border.GestureRecognizers>

                                    <Image Source="menu_map.png" WidthRequest="24" HeightRequest="24">
                                        <Image.Behaviors>
                                            <toolkit:IconTintColorBehavior TintColor="{StaticResource DefaultTextColor}" />
                                        </Image.Behaviors>
                                    </Image>
                                </Border>
                            </Grid>

                            <Grid Grid.Column="1" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="4">
                                <Label Grid.Row="0" Text="{Binding Name, Mode=OneWay}" FontAttributes="Bold" HorizontalTextAlignment="Start" LineBreakMode="TailTruncation" />

                                <Grid Grid.Row="1" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto,Auto" RowSpacing="0" ColumnSpacing="4">
                                    <Grid Grid.Row="0" Grid.Column="0" ColumnDefinitions="Auto,Auto" ColumnSpacing="4">
                                        <Label Grid.Column="0" Text="{extensions:AppTranslate ArmorPage_Label_Progress}" FontSize="12" FontAttributes="Bold" VerticalOptions="Center" LineBreakMode="TailTruncation" />
                                        <controls:EmbeddedResourceImage Grid.Column="1" ResolveImageType="True" EmbeddedResourcePath="show_done" DissolutionLibraryType="{x:Type res:ResourceAccess}"
                                                                        IsVisible="{Binding IsCollected, Mode=OneWay}" WidthRequest="12" HeightRequest="12" VerticalOptions="Center" />
                                    </Grid>

                                    <Label Grid.Row="1" Grid.Column="0" Text="{Binding ProgressText, Mode=OneWay}" FontSize="12" VerticalOptions="Center" LineBreakMode="TailTruncation" />

                                    <Button Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="-" Command="{Binding ViewModel.DowngradeArmorCommand, Source={x:Reference ContentPage}}"
                                            CommandParameter="{Binding}" VerticalOptions="Center" />

                                    <Button Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Text="+" Command="{Binding ViewModel.UpgradeArmorCommand, Source={x:Reference ContentPage}}"
                                            CommandParameter="{Binding}" VerticalOptions="Center" />
                                </Grid>

                                <Label Grid.Row="2" Text="{Binding Source, Mode=OneTime}" FontSize="12" Margin="0,4,0,0" />

                                <Grid Grid.Row="3" ColumnDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" ColumnSpacing="4" VerticalOptions="Center">
                                    <Label Grid.Column="0" Text="{extensions:AppTranslate Armor_HtmlContent_Defense}" FontSize="12" FontAttributes="Bold" VerticalOptions="Center" />
                                    <Label Grid.Column="1" Text="{Binding BaseDefense, Mode=OneTime}" FontSize="12" VerticalOptions="Center"
                                           TextColor="{Binding BaseDefenseActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                           FontAttributes="{Binding BaseDefenseActive, Converter={StaticResource BooleanToFontAttributeConverter}, Mode=OneWay}" />

                                    <Label Grid.Column="2" Text=">" FontSize="12" VerticalOptions="Center" IsVisible="{Binding HasFirstUpgrade, Mode=OneTime}" />
                                    <Label Grid.Column="3" Text="{Binding FirstUpgradeDefense, Mode=OneTime}" FontSize="12" VerticalOptions="Center"
                                           TextColor="{Binding FirstDefenseUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                           FontAttributes="{Binding FirstDefenseUpgradeActive, Converter={StaticResource BooleanToFontAttributeConverter}, Mode=OneWay}"
                                           IsVisible="{Binding HasFirstUpgrade, Mode=OneTime}" />

                                    <Label Grid.Column="4" Text=">" FontSize="12" VerticalOptions="Center" IsVisible="{Binding HasSecondUpgrade, Mode=OneTime}" />
                                    <Label Grid.Column="5" Text="{Binding SecondUpgradeDefense, Mode=OneTime}" FontSize="12" VerticalOptions="Center"
                                           TextColor="{Binding SecondDefenseUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                           FontAttributes="{Binding SecondDefenseUpgradeActive, Converter={StaticResource BooleanToFontAttributeConverter}, Mode=OneWay}"
                                           IsVisible="{Binding HasSecondUpgrade, Mode=OneTime}" />

                                    <Label Grid.Column="6" Text=">" FontSize="12" VerticalOptions="Center" IsVisible="{Binding HasThirdUpgrade, Mode=OneTime}" />
                                    <Label Grid.Column="7" Text="{Binding ThirdUpgradeDefense, Mode=OneTime}" FontSize="12" VerticalOptions="Center"
                                           TextColor="{Binding ThirdDefenseUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                           FontAttributes="{Binding ThirdDefenseUpgradeActive, Converter={StaticResource BooleanToFontAttributeConverter}, Mode=OneWay}"
                                           IsVisible="{Binding HasThirdUpgrade, Mode=OneTime}" />

                                    <Label Grid.Column="8" Text=">" FontSize="12" VerticalOptions="Center" IsVisible="{Binding HasFourthUpgrade, Mode=OneTime}" />
                                    <Label Grid.Column="9" Text="{Binding FourthUpgradeDefense, Mode=OneTime}" FontSize="12" VerticalOptions="Center"
                                           TextColor="{Binding FourthUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                           FontAttributes="{Binding FourthUpgradeActive, Converter={StaticResource BooleanToFontAttributeConverter}, Mode=OneWay}"
                                           IsVisible="{Binding HasFourthUpgrade, Mode=OneTime}" />
                                </Grid>

                                <Label Grid.Row="4" Text="{extensions:AppTranslate Armor_HtmlContent_ArmorBonus}" FontSize="12" FontAttributes="Bold" IsVisible="{Binding HasArmorBonus, Mode=OneTime}" />
                                <Label Grid.Row="5" Text="{Binding ArmorBonus, Mode=OneWay}" FontSize="12" Margin="0,-6,0,0" IsVisible="{Binding HasArmorBonus, Mode=OneTime}" />

                                <Label Grid.Row="6" Text="{extensions:AppTranslate Armor_HtmlContent_FullArmorBonus}" FontSize="12" FontAttributes="Bold" IsVisible="{Binding HasFullArmorBonus, Mode=OneTime}" />
                                <Label Grid.Row="7" Text="{Binding FullArmorBonus, Mode=OneTime}" FontSize="12" Margin="0,-6,0,0" IsVisible="{Binding HasFullArmorBonus, Mode=OneTime}" />

                                <Label Grid.Row="8" Text="{extensions:AppTranslate Armor_HtmlContent_1stUpgrade}" FontSize="12" FontAttributes="Bold"
                                       TextColor="{Binding FirstUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasFirstUpgrade, Mode=OneTime}" />
                                <Label Grid.Row="9" Text="{Binding FirstUpgradeMaterials, Mode=OneWay}" FontSize="12" Margin="0,-6,0,0"
                                       TextColor="{Binding FirstUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasFirstUpgrade, Mode=OneTime}" />

                                <Label Grid.Row="10" Text="{extensions:AppTranslate Armor_HtmlContent_2ndUpgrade}" FontSize="12" FontAttributes="Bold"
                                       TextColor="{Binding SecondUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasSecondUpgrade, Mode=OneTime}" />
                                <Label Grid.Row="11" Text="{Binding SecondUpgradeMaterials, Mode=OneWay}" FontSize="12" Margin="0,-6,0,0"
                                       TextColor="{Binding SecondUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasSecondUpgrade, Mode=OneTime}" />

                                <Label Grid.Row="12" Text="{extensions:AppTranslate Armor_HtmlContent_3thUpgrade}" FontSize="12" FontAttributes="Bold"
                                       TextColor="{Binding ThirdUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasThirdUpgrade, Mode=OneTime}" />
                                <Label Grid.Row="13" Text="{Binding ThirdUpgradeMaterials, Mode=OneWay}" FontSize="12" Margin="0,-6,0,0"
                                       TextColor="{Binding ThirdUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasThirdUpgrade, Mode=OneTime}" />

                                <Label Grid.Row="14" Text="{extensions:AppTranslate Armor_HtmlContent_4thUpgrade}" FontSize="12" FontAttributes="Bold"
                                       TextColor="{Binding FourthUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasFourthUpgrade, Mode=OneTime}" />
                                <Label Grid.Row="15" Text="{Binding FourthUpgradeMaterials, Mode=OneWay}" FontSize="12" Margin="0,-6,0,0"
                                       TextColor="{Binding FourthUpgradeActive, Converter={StaticResource BooleanToColorConverter}, Mode=OneWay}"
                                       IsVisible="{Binding HasFourthUpgrade, Mode=OneTime}" />
                            </Grid>
                        </Grid>
                    </Border>
                </mpowerkit:VirtualizeListViewCell>
            </DataTemplate>
        </mpowerkit:VirtualizeListView.ItemTemplate>
    </mpowerkit:VirtualizeListView>
</base:AdMobBaseContentPage>

Did I miss something or does it just not work for my use-case?

[Alex-Dobrynin]

First of all, changing span in runtime will not take any effect. you need to change layout with needed parameters. and if you need span = 1, then just use linear layout, this will improve the performance
Second, i want to ask you to provide a repro project here. would appreciate it.

[Sebastian1989101]

Even when setting a fixed span value, the list stays blank. I can try to make a repro project at the weekend, was just trying a few libraries out for performance reasons and was just noticing that it just goes blank. My guess would be that the list has a problem with dynamically changing ItemSources (between grouped and none grouped list) and IsGrouped flags.

[Alex-Dobrynin]

not sure, will check when you provide repro.

also you can try to set itemsource after some delay

[Alex-Dobrynin]

BTW, this is crazy:
Grid.Column="1" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="4"

just use VerticalStackLayout

[Sebastian1989101]

@Alex-Dobrynin Yep, that project has a lot of technical debt. It's a few years old and got made by multiple developers so some weird things are still in there. However that should not explain this issue and neither should it be that large of a performance issue (because it was also way smoother when it was Xamarin.Forms compared to MAUI).

I used the time while being stuck in a meeting to break it down to just this page for a sample repo.

ListViewTestSample.zip

Hope you can see what the issue is as this library sounds promising instead of the default CollectionView..