How to show empty view in a group without items in .NET MAUI ListView?

You can display an empty view in a group without items in .NET MAUI ListView by handling the visibility of the view within the GroupHeaderTemplate.

Step 1: When a group has no items, add dummy items to make the group header visible and set the dummy item height to 0.

private void listView_ItemTapped(object sender, Syncfusion.Maui.ListView.ItemTappedEventArgs e)
{
    var item = e.DataItem as Contacts;
    GroupResult group = null;
 
    if (item != null)
    {
        foreach (var a in this.listView.DataSource!.Groups)
        {
            if (a.Key.ToString() == item.Group)
            {
                group = a;
                break;
            }
        }
 
        if (group!.Count == 1 && item.ContactName != "")
        {
            var record = new Contacts() { ContactName = "", ContactNumber = ""};
            record.Group = item.Group;
            viewModel.ContactsInfo!.Add(record);
        }
 
        if (item.ContactName != "")
        {
            viewModel.ContactsInfo!.Remove(item);
        }
    }
}

 private void ListView_QueryItemSize(object sender, QueryItemSizeEventArgs e)
 {
     // set item size as 0 for dummy item to make invisible in view.
     var item = e.DataItem as Contacts;
     if (item != null && item.ContactName == "")
     {
         e.ItemSize = 0;
         e.Handled = true;
     }
 }

Step 2: Change the visibility and HeightRequest of an EmptyView grid inside the GroupHeaderTemplate based on the item count in the group.

<listView:SfListView.GroupHeaderTemplate>
    <DataTemplate>
        <Grid BackgroundColor="Teal" RowDefinitions="Auto,Auto" ColumnDefinitions="*,Auto">
            <Label Text="{Binding Key}"
                    FontSize="22"
                    TextColor="White"
                    FontAttributes="Bold"
                    VerticalOptions="Center"
                    Margin="10,0,0,0" />
            <Image Grid.Column="1" Source="addcontact.png" Margin="0,0,20,0"
                   HeightRequest="20" WidthRequest="20">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="AddContact_Tapped" CommandParameter="{Binding .}"/>
                </Image.GestureRecognizers>
            </Image>
            <Grid x:Name="groupEmptyView" BackgroundColor="LightCoral" Grid.Row="1"
                  IsVisible="{Binding . , Converter= {StaticResource EmptyViewHeightConverter}}" 
                  HeightRequest="{Binding ., Converter={StaticResource EmptyViewHeightConverter}}">

                <Label VerticalOptions="Center" VerticalTextAlignment="Center"
                       HorizontalOptions="Center" HorizontalTextAlignment="Center"
                       Text="No Items"/>
            </Grid>
        </Grid>                    
    </DataTemplate>
</listView:SfListView.GroupHeaderTemplate>

Output

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to show an empty view in a group without items in .NET MAUI ListView.

You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!