ListView with MVVM IListFeed pagination does not display items

[hbraasch]

I'm trying to work with ListView pagination and have set up a sample based on the Uno documentation.

It is based on the sample template with just a ListView added to the MainPage, with paging code in the viewModel

The ListView is defined in the XAML:

<ListView
    ItemsSource="{Binding DataAuto}"
    SelectedItem="{Binding SelectedDisplayItem, Mode=TwoWay}"
    Background="LightGray"
    Height="200">
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock VerticalAlignment="Center"
                        Text="{Binding Description}"
                        FontSize="{Binding DataContext.DefaultTextSize, ElementName=EnablePageRoot}"
                        Margin="10,0,0,0" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

The pagination code in the ViewModel is the following:

private ObservableCollection<DisplayItem> DataItems = new ObservableCollection<DisplayItem>();

public IListFeed<DisplayItem> DataAuto =>
    ListFeed.AsyncPaginated<DisplayItem>(async (PageRequest pageRequest, CancellationToken ct) =>
        await GetDataAsync(pageSize: pageRequest.DesiredSize ?? 5, firstItemIndex: pageRequest.CurrentCount, ct));

public async ValueTask<IImmutableList<DisplayItem>> GetDataAsync(uint pageSize, uint firstItemIndex, CancellationToken ct)
{
    // convert to int for use with LINQ
    var (size, count) = ((int)pageSize, (int)firstItemIndex);

    // fake delay to simulate loading data
    await Task.Delay(TimeSpan.FromSeconds(1), ct);

    // this is where we would asynchronously load actual data from a remote data store
    var people = GenerateData();

    return people
        .Skip(count)
        .Take(size)
        .ToImmutableList();
}

If I set the listview datasource to ItemsSource="{Binding DataItems}", it displays fine

If I set the listview datasource to ItemsSource="{Binding DataAuto}", the DataAuto method is reached, but the ListFeed.AsyncPaginated never fires. Obviously GetDataAsync never runs, so no data displays.

If I encapsulate the ListView inside a FeedView as below, it displays a first page fine, so the binding works.

<mvux:FeedView Source="{Binding DataAuto}">
    <DataTemplate>
        <ListView
            ItemsSource="{Binding Data}"
            Background="LightGray"
            Height="200">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextBlock VerticalAlignment="Center"
                                Text="{Binding Description}"
                                Margin="10,0,0,0" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </DataTemplate>
</mvux:FeedView>

Why would this super simple example fail to work. Is the Listview not designed to work with a ListFeed?

Help shall be much appreciated.

The sample project is at: https://github.com/hbraasch/UnoPaginateTester.git

Thanks

[DevTKSS]

I did not pagination but maybe this helps you although. Done listview inside of FeedView (thought that is a have to for IFeedList which I did use via mvux

            <!--Left Side-->
            <mvux:FeedView x:Name="LeftFeedView" Grid.Column="0"
                           Grid.Row="1"
                           Source="{Binding GalleryImages}"
                           Margin="3">
                <DataTemplate>
                    <ListView ItemsSource="{Binding Data}"
                              ItemTemplate="{StaticResource GalleryImageOverlayTemplate}"
                              AllowDrop="True"
                              CanDrag="True"
                              CanReorderItems="True"
                              SelectionMode="Single">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsStackPanel AreStickyGroupHeadersEnabled="True"/>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.Header>

                                <Grid Background="{ThemeResource SurfaceInverseBrush}"
                                      CornerRadius="10,10,0,0"
                                      Padding="10"
                                      HorizontalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*" MinWidth="100"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <PersonPicture x:Name="PictureElement" ProfilePicture="Assets/Images/logo.png"
                                                    Width="60"
                                                    Style="{StaticResource DefaultPersonPictureStyle}"
                                                    Grid.Column="0"/>
                                    <TextBlock x:Name="CaptionText" Text="This is a cool ListView fed from FeedView, isn't it?"
                                                Style="{ThemeResource TitleMedium}"
                                                Margin="16,14,16,0"
                                                Foreground="{ThemeResource OnSurfaceInverseBrush}"
                                                VerticalAlignment="Stretch"
                                                HorizontalAlignment="Center"
                                                TextAlignment="Center"
                                                Grid.Column="1"
                                               TextWrapping="WrapWholeWords"/>
                                    <Button x:Name="RefreshButton" Command="{utu:AncestorBinding AncestorType=mvux:FeedView, Path=Refresh}"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Stretch"
                                            Grid.Column="2">
                                    <SymbolIcon Symbol="Refresh"
                                            HorizontalAlignment="Right"/>
                                    </Button>
                                </Grid>

                        </ListView.Header>
                    </ListView>
                </DataTemplate>
            </mvux:FeedView>

MainModel.cs property:

    public IListFeed<GalleryImageModel> GalleryImages => ListFeed.Async(this._galleryImageService.GetGalleryImagesAsync);

GalleryImageService.cs

    private async ValueTask<IImmutableList<GalleryImageModel>> GetGalleryImagesAsync(CancellationToken ct)
    {
        await Task.Delay(TimeSpan.FromMicroseconds(1),ct);
        var galleryImages = new GalleryImageModel[]
        {
            new GalleryImageModel(
                Title: "Fluffy",
                ImageLocation: "ms-appx:///Assets/Images/img_20240531_141928.jpg",
                Description: "SomeDescriptionText.")).ToImmutableList();
return galleryImages

Item DataTemplate in page.resources:

        <DataTemplate x:Key="GalleryImageOverlayTemplate" x:DataType="gm:GalleryImageModel">
            <Grid HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  CornerRadius="20"
                  Background="{ThemeResource BackgroundBrush}"
                  Margin="5"
                  Padding="2"
                  MaxHeight="400">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" MaxHeight="400"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Image Source="{Binding ImageLocation}"
                           Grid.Row="0" Grid.RowSpan="2"
                           Stretch="Uniform"
                           Width="{utu:AncestorBinding AncestorType=Grid, Path=Width}" />
                    <StackPanel Background="{ThemeResource SurfaceInverseBrush}"
                                Opacity=".7"
                                Grid.Row="1"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Bottom">
                        <TextBlock Text="{Binding Title}"
                                   Style="{ThemeResource TitleLarge}"
                                   Margin="16,14,16,0"
                                   Foreground="{ThemeResource OnSurfaceInverseBrush}"/>
                        <TextBlock Text="{Binding Description}"
                                   Style="{ThemeResource BodySmall}"
                                   Margin="16,0,16,14"
                                   Foreground="{ThemeResource OnSurfaceInverseBrush}"/>
                </StackPanel>
                </Grid>
            </DataTemplate>

I think on your code is maybe missing the data type in the DataTemplate header?

[hbraasch]

Thanks for this. Much appreciated.

Yes, I did something similar with a FeedView and got the list to populate (first page only, because it does not support pagination).

I also bound it to a Observable Collection and it fully populated. So I think the [Data type] in the DataTemplate might not be the issue. I tried adding it however, but still no improvement.

Appreciate your help though.

[ajpinedam]

Hi @hbraasch thanks for the sample attached.

I validated your code, and some things are not correctly set; sorry if this was clear from the documentation:

First, you have a mix of MVVM and MVUX. It's okay to have both, although I suggest you stick to one.

1: For example, your IListFeed is inside a MainViewModel class object. The correct setup would require all this logic inside a Record object called for example MainModel. MVUX will auto-generate the ViewModel object with everything you need to bind to your Views.

using System.Diagnostics;
namespace UnoPaginateTester.Presentation;

public record DisplayItem(string Description);

public partial record MainModel
{
    private INavigator _navigator;

    public string? Title { get; }

    public IState<string> Name => State<string>.Value(this, () => string.Empty);

    public IListFeed<DisplayItem> DataAuto =>
        ListFeed.AsyncPaginated<DisplayItem>(async (PageRequest pageRequest, CancellationToken ct) =>
            await GetDataAsync(pageSize: pageRequest.DesiredSize ?? 5, firstItemIndex: pageRequest.CurrentCount, ct));

    public MainModel(
        IStringLocalizer localizer,
        IOptions<AppConfig> appInfo,
        INavigator navigator)
    {
        _navigator = navigator;
        Title = "Main";
        Title += $" - {localizer["ApplicationName"]}";
        Title += $" - {appInfo?.Value?.Environment}";
    }

    public async Task GoToSecondView()
    {
        var pageRequest = new PageRequest { DesiredSize = 5, CurrentCount = 0 };

        var data = await GetDataAsync(pageRequest.DesiredSize ?? 5, pageRequest.CurrentCount, CancellationToken.None);

        Debug.WriteLine($"Fetched {data.Count} items.");

        var name = await Name;
        await _navigator.NavigateViewModelAsync<SecondViewModel>(this, data: new Entity(name!));
    }

    public async ValueTask<IImmutableList<DisplayItem>> GetDataAsync(uint pageSize, uint firstItemIndex, CancellationToken ct)
    {
        // convert to int for use with LINQ
        var (size, count) = ((int)pageSize, (int)firstItemIndex);

        // fake delay to simulate loading data
        await Task.Delay(TimeSpan.FromSeconds(1), ct);

        // this is where we would asynchronously load actual data from a remote data store
        var people = GenerateData();

        Debug.WriteLine($"Fetching Data: Count: {count} items.");

        return people
            .Skip(count)
            .Take(size)
            .ToImmutableList();
    }

    private List<DisplayItem> GenerateData()
    {
        var items = new List<DisplayItem>();
        for (var i = 0; i < 100; i++)
        {
            items.Add(new DisplayItem($"Item{i}"));
        }
        return items;
    }
}

Note: You must rename the MainViewModel class, comment it out, or just delete it.

2: You are already using Uno.SDK, which means all the Uno Platform libraries are already included. This means you don't need to install Uno.Extensions.Reactive manually. Instead, to activate new features, MVUX, for example, you update (in your case) the .csproj file, adding the new UnoFeatures you want—more info here.

Here, I added MVUX to the list of features that were previously set.

    <UnoFeatures>
        Material;
        Hosting;
        Toolkit;
        Logging;
        Mvvm;
        Configuration;
        Http;
        Serialization;
        Localization;
        Navigation;
        MVUX;
    </UnoFeatures>

You will also need to remove the references to Uno.Extensions.Reactive from the .csproj file and the Directory.Packages.props file.

Delete these lines of code

  <ItemGroup>
    <PackageReference Include="Uno.Extensions.Reactive" />
  </ItemGroup>

and these:

  <ItemGroup>
    <PackageVersion Include="Uno.Extensions.Reactive" Version="5.1.3" />
  </ItemGroup>

3: This is just a note: this project was created using an old version of the Uno.Template, which is why, for it to work, you will need to add one extra change. On the RegisterRoutes() method of the App.xaml.cs, you must replace MainViewModel with BindindableMainModel.

BindindableMainModel is the class generated by MVUX for older versions of the Framework. This was changed a couple of versions ago, and now MVUX will create an object called, in this specific case (MainMode), MainViewModel.

Important: You can force MVUX to use the latest naming convention (MainViewModel instead of BIndableMainModel). You would need to use this line of code below in your GlobalUsings.cs file

[assembly: Uno.Extensions.Reactive.Config.BindableGenerationTool(3)]

With the abovementioned changes, you should get your pagination app to work. More about Pagination and MVUX

Note: I have my changes locally. If you'd like me to push them, just let me know.

uno_mvux_pagination.mp4

[hbraasch]

@ajpinedam
Thanks a lot. Very clear and detailed instructions.
Sorry, I should have been more specific... I'm a MVVM user and would like to solve the problem in that environment. Therefore the MainViewModel as auto generated by the template project, when MVVM is chosen.

Do you think I can get it to work with MVVM?
Thanks again

[hbraasch]

Finally, got something to work, but with a completely different approach. Using the code from:

https://nicksnettravels.builttoroam.com/incremental-loading-pagination-with-mvvm-and-mvux/

This makes use of an enhanced ObservableCollection.

Personally, I do not think the Uno Listview work with IListFeed, unless used under MVUX. I wish someone can confirm that and update the documentation. It might stop one from wasting hours trying to get it to work.

[ajpinedam]

I'm happy to hear you found a way to get it to work with MVVM.

Re: IListFeed and ListView: IFeed, IListFeed, IListState, and State are all part of MVUX, which is why you need MVUX for it to work.

If you look at the documentation, you will see that the IListState, for example, is inside the MVUX node, but I agree we could be more explicit about it in the actual documentation.

Personal Note: I recommend using MVUX. We developed MVUX to simplify data loading and state management while promoting immutability, which is achievable with MVVM but often requires additional effort.

If you want to give MVUX a try, the docs cover most of the topics, but if you have extra questions, we are in Discord.