Category / Section
How to add a separator between items in .NET MAUI ListView (SfListView) ?
1 min read
You can add a separator between ListViewItems in .NET MAUI ListView (SfListView).
XAML
In the SfListView.ItemTemplate, the BoxView with HeightRequest as 1 is added to show the separator line. You can also bind the converter to the IsVisible property to handle the visibility of the separator line of the last item.
<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"
BackgroundColor="White">
<ContentPage.Resources>
<ResourceDictionary>
<local:SeparatorVisibilityConverter x:Key="separatorVisibilityConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<listView:SfListView x:Name="listView" ItemsSource="{Binding BookInfo}" ItemSize="120">
<listView:SfListView.ItemTemplate>
<DataTemplate>
<StackLayout>
<StackLayout Margin="10,0,0,0" VerticalOptions="StartAndExpand">
<Label Text="{Binding BookName}" FontSize="20" FontAttributes="Bold" VerticalOptions="CenterAndExpand"/>
<Label Text="{Binding BookDescription}" FontSize="15" VerticalOptions="StartAndExpand"/>
</StackLayout>
<BoxView HeightRequest="1" BackgroundColor="LightGray"
IsVisible="{Binding .,Converter={StaticResource separatorVisibilityConverter}, ConverterParameter={x:Reference Name=listView}}"/>
</StackLayout>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
</ContentPage>
C#
Returns false for the last item that can be accessed from the DataSource.DisplayItems, and true for other items.
public class SeparatorVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var listView = parameter as SfListView;
if (value == null)
return false;
return listView.DataSource.DisplayItems[listView.DataSource.DisplayItems.Count - 1] != value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Take a moment to peruse the documentation to learn more about view appearance customization in SfListView with code examples.
