C#•3mo ago

✅ MAUI CollectionView Not Displaying

I am trying to get a data bound CollectionView to display in my MAUI app, so far only on Android, but when I navigate the content page hosting the view, only the header displays. I've searched a round a bit and can't seem to find anything that applies, so I'm throwing this out here so long. Here is my whole content page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Cts.Maui.Dx.Models"
             x:Class="Cts.Maui.Dx.ApplicationListPage">
    <ContentPage.BindingContext>
        <models:ApplicationListViewModel x:Name="ViewModel" />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <CollectionView ItemsSource="{Binding Data}">
            <CollectionView.Header>
                <Label Text="Header" />
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Text="{Binding LearnerDesc}" />
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="{Binding Originator}" />
                            <Label Grid.Column="1" Text="{Binding StartDate}" />
                            <Label Grid.Column="2" Text="{Binding IsLocked}" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Cts.Maui.Dx.Models"
             x:Class="Cts.Maui.Dx.ApplicationListPage">
    <ContentPage.BindingContext>
        <models:ApplicationListViewModel x:Name="ViewModel" />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <CollectionView ItemsSource="{Binding Data}">
            <CollectionView.Header>
                <Label Text="Header" />
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Text="{Binding LearnerDesc}" />
                        <Grid Grid.Row="1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="{Binding Originator}" />
                            <Label Grid.Column="1" Text="{Binding StartDate}" />
                            <Label Grid.Column="2" Text="{Binding IsLocked}" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

I populate the viewmodel from the page's Loaded event like this:

    private async void OnLoaded(object sender, EventArgs e)
    {
        var stream = await FileSystem.OpenAppPackageFileAsync("appList.json");
        var streamReader = new StreamReader(stream);
        ViewModel.LoadFromJson(await streamReader.ReadToEndAsync());
    }
...
    public void LoadFromJson(string json)
    {
        var apps = JsonSerializer.Deserialize<List<LicenseApplicationDto>>(json) ?? throw new InvalidOperationException("Deserialized to null");
        Data = apps;
        OnPropertyChanged();
    }

    private async void OnLoaded(object sender, EventArgs e)
    {
        var stream = await FileSystem.OpenAppPackageFileAsync("appList.json");
        var streamReader = new StreamReader(stream);
        ViewModel.LoadFromJson(await streamReader.ReadToEndAsync());
    }
...
    public void LoadFromJson(string json)
    {
        var apps = JsonSerializer.Deserialize<List<LicenseApplicationDto>>(json) ?? throw new InvalidOperationException("Deserialized to null");
        Data = apps;
        OnPropertyChanged();
    }

When I navigate to the page, my breakpoint in OnLoaded gets hit, and the JSON properly deserializes into 200 DTO's that look OK. I don't see any error messages logged for binding or anything, but the Android log is so busy it's kind of hard to tell. I know the page and collection view are loading because the text in the Header template displays, but that is all I can see on my device.

1 Reply

Brady Kelly•3mo ago

It would seem this is Android only. I have just created a new MAUI app targeting Windows only and my collection view does populate there. On explicitly binding a viewmodel to the CollectionView, in Android only, my view is now binding:

        var stream = await FileSystem.OpenAppPackageFileAsync("appList.json");
        var streamReader = new StreamReader(stream);
        var json = await streamReader.ReadToEndAsync();
        // ViewModel.LoadFromJson(await streamReader.ReadToEndAsync());
        var model = new ApplicationListViewModel();
        model.LoadFromJson(json);
        CollectionView.ItemsSource = model.Data;

        var stream = await FileSystem.OpenAppPackageFileAsync("appList.json");
        var streamReader = new StreamReader(stream);
        var json = await streamReader.ReadToEndAsync();
        // ViewModel.LoadFromJson(await streamReader.ReadToEndAsync());
        var model = new ApplicationListViewModel();
        model.LoadFromJson(json);
        CollectionView.ItemsSource = model.Data;

Gaming

Programming

✅ MAUI CollectionView Not Displaying