Horizontal line between items

Hi there Sync team!
I'd like to know how can I create horizontal lines that separate the items in the list but only the last item doesn't have it.
This is so far what I have:



What I do is just adding a boxview at the end of the template but as you can see the last item doesn't look well with the last line.
I'd like to know if there's an option for this because I don't want to have a line in the last item.

5 Replies 1 reply marked as answer

LN Lakshmi Natarajan Syncfusion Team December 11, 2020 01:54 PM UTC

Hi Jorge, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Horizontal line between items” from our side. We would like to inform you that you can achieve your requirement by handling the visibility using Converter. Please refer the following code snippets for more reference, 
 
XAML: Define converter and bind to the BoxView.IsVisible property. 
<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.Content> 
        <StackLayout> 
            <syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> 
                <syncfusion:SfListView.ItemTemplate > 
                    <DataTemplate> 
                        <StackLayout> 
                            <Grid x:Name="grid"> 
                               ... 
                            </Grid> 
                            <BoxView Grid.Row="1" IsVisible="{Binding .,Converter={StaticResource separatorVisibilityConverter}, ConverterParameter={x:Reference Name=listView}}" BackgroundColor="Red" HeightRequest="1"/> 
                        </StackLayout> 
                    </DataTemplate> 
                </syncfusion:SfListView.ItemTemplate> 
            </syncfusion:SfListView> 
        </StackLayout> 
    </ContentPage.Content> 
</ContentPage> 
 
 
Converter: 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; 
    } 
} 
 
 
 
 
 
 
 
 
 
 
 
           
 
We have prepared a sample based on your requirement and you can download it from the following link, 
 
You can also refer to our documentation to handle separator line with grouping in the link below, 
 
Please let us know if this helps. 
 
Lakshmi Natarajan 
  
 


Marked as answer

JV Jorge Valenzuela December 11, 2020 05:28 PM UTC

The solution works for hiding the last line, but once you move the last element to another position the line is still missing. Is there a way to show/hide the line?




LN Lakshmi Natarajan Syncfusion Team December 14, 2020 05:42 AM UTC

Hi Jorge, 
 
Thank you for the update. 
 
We would like to inform you that you can update the separator line after reordering using the RefreshListViewItem method in the ItemDragging event. Please refer the following code snippets to achieve your requirement, 
 
Use the DragDropController.UpdateSource as true to update the underlying collection. 
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)); 
        } 
    } 
} 
 
You can refer to the modified sample in the following link, 
 
Also, refer to our user guidance documentation regarding the same from the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 



JV Jorge Valenzuela December 14, 2020 06:40 AM UTC

That last line of code did the trick haha.
Thank you very much for your great support.

Best regards!


LN Lakshmi Natarajan Syncfusion Team December 14, 2020 06:56 AM UTC

Hi Jorge, 
 
Thank you for the update. 
 
We are glad that our solution meets your requirement. Please let us know if you need further assistance. As always we are happy to help you out. 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon