Xamarin ListView Grouping Issue

Question

I am having trouble with grouping using a ListView in Xamarin. I have looked at more guides than I can count, but I'm still not able to get it working. I can see that the ViewModel property is being set properly, but all I get is a blank screen. Please don't answer with a link to another guide, as I have probably already looked at it and it did not help. I believe I am very close.

Class Domain:

public class TechInventoryDetail
{
    public int EquipmentInventoryDetailEntityId { get; set; }

    public int TechId { get; set; }

    public string CodeDetail { get; set; }

    public string CodeDescription { get; set; }

    public int Need { get; set; }

    public int Have { get; set; }

    public string ServiceCategory { get; set; }
}

View Model Property:

private ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>> _techEquipmentOverview = new ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>>();

public ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>> TechEquipmentOverview
{
    get => _techEquipmentOverview;
    set { _techEquipmentOverview = value; RaisePropertyChanged(); }
}

Set Using View Model Method:

public async Task GetTechEquipmentOverviewAsync()
{
    var result = await _techService.GetTechEquipmentOverviewAsync(false);

    if (result.Success)
    {
        var equipmentGrouped = result.Data.InventoryDetail.GroupBy(c => c.ServiceCategory, c => c);
        var groups = equipmentGrouped.Select(g => new Models.Grouping<string, TechInventoryDetail>(g.Key, g)).ToList();

        if (groups.Any())
        {
            TechEquipmentOverview = new ObservableRangeCollection<Models.Grouping<string, TechInventoryDetail>>();
            TechEquipmentOverview.AddRange(groups);
        }
    }
}

Xaml ListView:

<ListView HasUnevenRows="true" 
              IsGroupingEnabled="true"
              GroupDisplayBinding="{Binding Key}"
              ItemsSource="{Binding TechEquipmentOverview}">
        <ListView.GroupHeaderTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <StackLayout Padding="0,5,0,5" Orientation="Vertical">
                            <Label
                                HorizontalTextAlignment="Center"
                                Style="{StaticResource EquipmentGroupHeader}"
                                Text="{Binding Key}" />
                        </StackLayout>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.GroupHeaderTemplate>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Grid.Children>
                            <Label
                                Grid.Row="0"
                                Grid.ColumnSpan="4"
                                HorizontalTextAlignment="Center"
                                LineBreakMode="TailTruncation"
                                Style="{StaticResource DefaultSectionHeader}"
                                Text="{Binding CodeDetail}" />

                            <Label
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Margin="0,5,5,5"
                                Style="{StaticResource H1}"
                                Text="Need" />
                            <Label
                                Grid.Row="2"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Margin="0,15,5,5"
                                LineBreakMode="TailTruncation"
                                Style="{StaticResource H2}"
                                Text="{Binding Need}" />

                            <Label
                                Grid.Row="1"
                                Grid.Column="2"
                                Grid.ColumnSpan="2"
                                Margin="0,5,5,5"
                                Style="{StaticResource H1}"
                                Text="Have" />
                            <Label
                                Grid.Row="2"
                                Grid.Column="2"
                                Grid.ColumnSpan="2"
                                Margin="0,15,5,5"
                                LineBreakMode="TailTruncation"
                                Style="{StaticResource H2}"
                                Text="{Binding Have}" />
                        </Grid.Children>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

In your GetTechEquipmentOverviewAsync method, you are resetting the TechEquipmentOverview observable collection and the UI doesn't know about the new list.

You need to implement INotifyPropertyChanged in your ViewModel and notify the UI that the list reference has changed. Also, make sure you are notifying the UI on the main UI thread by using Device.BeginInvokeOnMainThread .