.NET MAUI ListView Expand and Collapse Groups
The ListView supports groups expand and collapse operations either through the UI by tapping on the group headers or programmatically. By default, all the groups are expanded.
This help topic will provide an overview of the methods and commands used to control the expand/collapse state of the ListView groups.
Before proceeding, check the Grouping topic which describes how to enable the grouping feature of ListView.
Get the Grouped ListView Items
To manipulate the collapsible ListView groups, first you will need to call its GetDataView
method. In short, GetDataView
method provides a view of the Items Source after all the Sort, Group and Filter operations are applied. The return type is IDataViewCollection
which exposes the expand and collapse methods described in the following sections.
var dataView = this.listView.GetDataView();
Expand and Collapse All Groups
To expand all groups, use the ExpandAll
method. To collapse all groups, use the CollapseAll
method.
//expand all
var dataView = this.listView.GetDataView();
dataView.ExpandAll();
//collapse all
var dataView = this.listView.GetDataView();
dataView.CollapseAll();
Expand and Collapse a Certain Group
You can retrieve the first-level groups through the GetGroups
method of the IDataViewCollection
object and use ExpandGroup
/CollapseGroup
to make a certain group to expand or collapse respectively. You can check whether a group is expanded trough the GetIsExpanded
method.
Here is quick snippet on how these methods are used:
var dataView = this.listView.GetDataView();
var rootGroups = dataView.GetGroups();
var isFirstExpanded = dataView.GetIsExpanded(rootGroups.First());
//expand a certain group
dataView.ExpandGroup(rootGroups.First());
//collapse a certain group
dataView.CollapseGroup(rootGroups.First());
Additionally, IDataViewCollection
provides the ExpandItem
/CollapseItem
methods that take a ListView item as a parameter and expand/collapse the immediate group containing this item.
var lastItem = (listView.ItemsSource as IEnumerable<City>).Last();
var dataView = this.listView.GetDataView();
dataView.CollapseItem(lastItem);
Handle the GroupHeaderTap Command
The GroupHeaderTap
command is raised when a group header of a grouped ListView is tapped. By default, tapping on a group header collapses the group if it is expanded and vice-versa.
By handling the GroupHeaderTap
command, you can control the collapse/expand behavior of a certain group. The next example shows how to prevent the first-level groups from hiding their items.
For more information on using the ListView commands, refer to the Commands topic.
1. Define the GroupHeaderTapCommand
class that derives from ListViewCommand
:
public class GroupHeaderTapCommand : ListViewCommand
{
public GroupHeaderTapCommand()
{
Id = CommandId.GroupHeaderTap;
}
public override bool CanExecute(object parameter)
{
return true;
}
public override void Execute(object parameter)
{
var context = parameter as GroupHeaderContext;
if (context.Level > 1)
context.IsExpanded = !context.IsExpanded;
}
}
2. Add the GroupHeaderTapCommand
to the Commands
collection of the ListView instance:
listView.Commands.Add(new GroupHeaderTapCommand());