.net maui grouping data binding not working, displays blank lines.

Question

My listview does not bind correctly, I'm getting blank lines. ( I'm missing something in the code)

(in debug) the for each loop show there is data in the Items object but it does not show up in the listview.

Xaml

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"


         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         x:Class="MapleSugarMaui.Views.CheckListPage"

         xmlns:local="clr-namespace:MapleSugarMaui"

         xmlns:vm="clr-namespace:MapleSugarMaui.ViewModels"

         x:DataType="vm:CheckListViewModel"

         xmlns:models="clr-namespace:MapleSugarMaui.Models"

         Shell.NavBarIsVisible="false" >

<ContentPage.BindingContext>

    <vm:CheckListViewModel />

</ContentPage.BindingContext>

<ContentPage.Content>

    <StackLayout>
...

  </StackLayout>

<!-- list view data -->

<ListView x:Name="ChecklistView" 

        ItemsSource="{Binding WorkCheckListItems}" 

        IsGroupingEnabled="True"

        HasUnevenRows="True">

  <ListView.GroupHeaderTemplate>

      <DataTemplate>

          <ViewCell>

              <Label FontSize="18" FontAttributes="Bold" BackgroundColor="White" Text="{Binding Sector}" />

          </ViewCell>

      </DataTemplate>

  </ListView.GroupHeaderTemplate>

  <ListView.ItemTemplate >

      <DataTemplate>

          <ViewCell>

              <StackLayout Orientation="Horizontal">

                  <StackLayout.GestureRecognizers>

                      <TapGestureRecognizer                            

                           Command="{Binding BindingContext.OnEditCommand, Source={x:Reference ChecklistView}}"

                           CommandParameter="{Binding .}" />

                  </StackLayout.GestureRecognizers>                               

                  <Label Text="{Binding Sector}" 

                      HorizontalOptions="Center" 

                         VerticalOptions="Center"

                         TextColor="Black"

                         FontAttributes="Bold"

                         WidthRequest="53"/>

                  <BoxView WidthRequest="1" BackgroundColor="Black" HorizontalOptions="Start"/>

                  <Label Text="{Binding TreeNumber}" 

                      HorizontalOptions="Center"

                         VerticalOptions="Center"

                         TextColor="Black"

                         FontAttributes="Bold"

xaml.cs

using MapleSugarMaui.ViewModels;

namespace MapleSugarMaui.Views;

public partial class CheckListPage : ContentPage

{


public CheckListPage()

{

	InitializeComponent();

    BindingContext = new CheckListViewModel();

}
}

Model.cs

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

using MapleSugarMaui.Models;

using MapleSugarMaui.Services;

using System.Collections.ObjectModel;

namespace MapleSugarMaui.ViewModels

{

internal partial class CheckListViewModel : BaseViewModel

{

    [ObservableProperty]

    private ObservableCollection<WorkCheckListItem> workCheckListItems = new();

    [ObservableProperty]

    private WorkCheckListItem workCheckListItem = new();

    [ObservableProperty]

    private int groupSector;

    [ObservableProperty]

    public int sector;

    [ObservableProperty]

    public int treeNumber;

    [ObservableProperty]

    public int subTreeNumber;
    ...

    public CheckListViewModel BindingContext { get; private set; }

    /* -----------------------------------------------  main code ------------------------------------------- */

    public CheckListViewModel()

    {

        StatusMsg = "Ready";

    }        

    [RelayCommand]

    private async Task LoadCheckListAction()

    {

        StatusMsg = " Checking for  file ";

        try

        {

            if (!FileSelected)

            {

                var CheckListFileName = await FilePicker.PickAsync();

                InputFileName = CheckListFileName.FullPath;

            }

            if (InputFileName != null)

            {

                FileSelected = true;

                // read JSON 

                var items = CheckListService.GetTrees(File.ReadAllText(InputFileName));

                foreach (var item in items)

                {

                   WorkCheckListItems.Add(item);

                }

                StatusMsg = " Ready ";

            }

        }

        catch (Exception ex)

        {

            Console.WriteLine("iOS Main Exception: {0}", ex);

        }

    }

}
}

Answer 1

Hello,

I understand that the lines are blank when you grouped data.

As described in the official ListView Doc- Data must be grouped before it can be displayed.

You have to modify the data source if you want to group it. Please follow the steps and refer to the sample in the doc. The process for grouping data:

• Create a type that models a single item. (You have this model, but you didn't provide the code snippets)
• Create a type that models a single group of items.
• Create an IEnumerable<T> collection, where T is the type that models a single group of items. This collection is a collection of groups, which stores the grouped data.
• Add data to the IEnumerable<T> collection.

Since it's not clear about your json file and the data format, you could share them with me if you have any issues during the grouping data process.

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.