Articles in this section
Category / Section

How to hide the line separator in Xamarin.Forms ListView with grouping (SfListView)

2 mins read

The Xamarin.Forms SfListView does not contain a line separator by default. You can load the StackLayout with a height of 1 to separate the items.

You can hide the separator for any item in a group by changing the IsVisible property of the StackLayout (Used as a Separator) loaded in the SfListView.ItemTemplate.


Converter binds to the Separator to hide it based on the requirement.

<ContentPage xmlns=""
             x:Class="ListViewXamarin.MainPage" Padding="0,50,0,0">
            <local:VisibilityConverter x:Key="VisibilityConverter"/>
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                            <StackLayout IsVisible="{Binding .,Converter={StaticResource VisibilityConverter}, ConverterParameter={x:Reference Name=listView}}" BackgroundColor="Red" HeightRequest="1"/>
                                    <ColumnDefinition Width="70" />
                                    <ColumnDefinition Width="*" />
                                <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
                                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/>
                                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
                        <StackLayout BackgroundColor="#E4E4E4">
                            <Label Text="{Binding Key}" FontSize="22" FontAttributes="Bold" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" Margin="20,0,0,0" />


In the converter, get the group result value and change the visibility of the first item in the group.

public class VisibilityConverter : 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();
        return list[0] != value;
    private GroupResult GetGroup(object itemData)
        GroupResult itemGroup = null;
        foreach (var item in this.ListView.DataSource.DisplayItems)
            if (item == itemData)
            if (item is GroupResult)
                itemGroup = item as GroupResult;
        return itemGroup;


Image to hide seperator for the first item of the Group in the Xamarin.Forms SfListView.

View sample in GitHub

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment