How to hide the line separator with grouping in .NET MAUI ListView (SfListView) ?
In the .NET MAUI ListView (SfListView), you can add a separator line to items with grouping enabled. To hide the separator line for the last item in a group, use a converter bound to the IsVisible property
XAML
Define the SfListView.ItemTemplate with a StackLayout having a HeightRequest as 1 to display the separator line. Utilize a converter to control the visibility of the separator for the last item in each group.
<ContentPage x:Class="ListViewMaui.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewMaui"
xmlns:ListView="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView">
<ContentPage.Resources>
<ResourceDictionary>
<local:SeparatorVisibilityConverter x:Key="VisibilityConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<ListView:SfListView x:Name="listView"
ItemSize="70"
GroupHeaderSize="50"
SelectionMode="Single"
IsStickyGroupHeader="True"
ItemsSource="{Binding ContactsInfo}"
AllowGroupExpandCollapse="True">
<ListView:SfListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="0" Grid.Row="0">
...
</Grid>
<StackLayout BackgroundColor="Red" HeightRequest="1" Grid.Row="1"
IsVisible="{Binding .,Converter={StaticResource VisibilityConverter}, ConverterParameter={x:Reference Name=listView}}" />
</Grid>
</DataTemplate>
</ListView:SfListView.ItemTemplate>
</ListView:SfListView>
</ContentPage.Content>
</ContentPage>
C#
Get the group details of the item from the DataSource.DisplayItems and get the group items from the GroupResult.Items property. Returns false for the last item of the group and true for other items.
public class SeparatorVisibilityConverter : IValueConverter
{
SfListView ListView;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
ListView = parameter as SfListView;
if (value == null || ListView.DataSource.Groups.Count == 0)
return false;
var groupresult = GetGroup(value);
var list = groupresult.Items.ToList<object>().ToList();
var item = list[list.Count - 1] as ListViewContactInfo;
return item != value;
}
private GroupResult GetGroup(object itemData)
{
var item = itemData as ListViewContactInfo;
return ListView.DataSource.DisplayItems.FirstOrDefault(x => (x is GroupResult group) && group.Key.ToString() == item.ContactName[0].ToString()) as GroupResult;
}
}
Download the complete sample on GitHub
Conclusion
I hope you enjoyed learning how to hide the line separator for the last item in groups within the .NET MAUI ListView.
You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.
For current customers, you can 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 below if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
