.net maui grouping code throws cast error.

Question

I'm converting a Xamarin app to .NET Maui.

I'll be needing the .NET page to ( stating all desired functions in case a different grouping code is needed )

1. group by sector ( optional , Sort and or filter maybe added later-- I'll settle for grouping for the time being)
2. be able to select a row and Pass the data to an edit page. (again grouping is the main issue here)
3. load the data quicker ( the Xamarin app groups and loads the data in less than 10 seconds)

I have a few Issues with the following code:

1) if I use the following code, the app throws an error

<ListView x:Name="ChecklistView" ItemsSource="{Binding WorkCheckListItems}" IsGroupingEnabled="True" GroupDisplayBinding="{Binding GroupSector}" HasUnevenRows="True">

2) if I remove the grouping code, it take 1 to 2 minutes to load and display 141 records ( read from a json file)

Xaml code page

<?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>
 <ListView x:Name="ChecklistView" ItemsSource="{Binding WorkCheckListItems}" HasUnevenRows="True">



<ListView.GroupHeaderTemplate>


<DataTemplate>

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

</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"

                   FontAttributes="Bold"

Viewmodel.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 int groupSector;

[ObservableProperty]

public int sector;

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);

    }

}
}
}

Xaml.cs

using MapleSugarMaui.ViewModels;

namespace MapleSugarMaui.Views;

public partial class CheckListPage : ContentPage

{

sql
public CheckListPage()

{


InitializeComponent();

BindingContext = new CheckListViewModel();
}
}

TIA

Tim

Answer 1

Hello,

grouping code throws cast error.

Please add the <ViewCell> in the <DataTemplate> of <ListView.GroupHeaderTemplate> like following code. If you want to enable the group for listview, you need to enable the group by IsGroupingEnabled="True".

<ListView x:Name="ChecklistView"
          ItemsSource="{Binding WorkCheckListItems}" 
          IsGroupingEnabled="True"
          HasUnevenRows="True">
<ListView.GroupHeaderTemplate>
      <DataTemplate>
          <ViewCell>
               <Label FontSize="18" FontAttributes="Bold" BackgroundColor="Gray" Text="{Binding Sector}" />
 
          </ViewCell>
      </DataTemplate>
</ListView.GroupHeaderTemplate>

Best Regards,

Leon Lu

---

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.