How to add a separator between items in a Xamarin.Forms ListView?
You can add a separator between ListViewItems in Xamarin.Forms ListView.
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 BoxView.IsVisible property to handle the visibility of the separator line.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ListViewXamarin"
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
x:Class="ListViewXamarin.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<local:SeparatorVisibilityConverter x:Key="separatorVisibilityConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Behaviors>
<local:Behavior/>
</ContentPage.Behaviors>
<ContentPage.Content>
<StackLayout>
<syncfusion:SfListView x:Name="listView" AutoFitMode="Height" DragStartMode="OnHold" ItemsSource="{Binding BookInfo}">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="0.4*" />
<RowDefinition Height="0.6*" />
</Grid.RowDefinitions>
<Label x:Name="label" Text="{Binding BookName}" FontSize="21" FontAttributes="Bold"/>
<Label Grid.Row="1" Text="{Binding BookDescription}" FontSize="15"/>
</Grid>
<BoxView IsVisible="{Binding .,Converter={StaticResource separatorVisibilityConverter}, ConverterParameter={x:Reference Name=listView}}" BackgroundColor="#93abd3" HeightRequest="1"/>
</StackLayout>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#
Returns false for the last item that can be accessed from the ListView.DataSource.DisplayItems, otherwise true.
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;
}
}
C#
The SfListView.ItemDragging event is triggered to update the separator line after reordering the item using the RefreshListViewItem method in the DropAction.Drop action. You need to set the UpdateSource property as true, to update the collection after reordering.
namespace ListViewXamarin
{
public class Behavior : Behavior<ContentPage>
{
SfListView ListView;
protected override void OnAttachedTo(ContentPage bindable)
{
ListView = bindable.FindByName<SfListView>("listView");
ListView.DragDropController.UpdateSource = true;
ListView.ItemDragging += ListView_ItemDragging;
base.OnAttachedTo(bindable);
}
private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
{
if (e.Action == DragAction.Drop)
{
Device.BeginInvokeOnMainThread(() => ListView.RefreshListViewItem(e.OldIndex, e.NewIndex, true));
}
}
}
}
Hope you enjoyed learning about how to add a seperator between items in a Xamarin.Forms Listview.
You can refer to our Xamarin.Forms ListView feature tour page to learn about its other groundbreaking feature representations. You can explore our Xamarin.Forms documentation to understand how to present and manipulate data.
For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Diagram and other Angular components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
