1. Home
  2. Forum
  3. Xamarin.Forms
  4. Scrolling index problem

Scrolling index problem

Hi,

I try to synchronize the listview with a map when I scroll my items. See the video.


But I would like to have the item which is the most visible in the list. And as you can see it's not what happens here. And I don't know how I can proceed to it.

Can you help?

My code is as below to get the index:

 private async void placeColl_ScrollStateChanged(object sender, Syncfusion.ListView.XForms.ScrollStateChangedEventArgs e)
        {
            if (e.ScrollState == ScrollState.Idle)
            {
                int index = visualContainer.ScrollRows.ScrollLineIndex;
                await srvm.SelectionChanged(index);
            }
        }

Is there something wrong?

If not possible is it possible to show only one item visible and when I scroll it moves another item (1 by 1) and with only one visible?

Thanks for your help

8 Replies
LN Lakshmi Natarajan Syncfusion Team May 7, 2020 05:51 PM UTC

Hi Alexis, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Scrolling index problem in SfListView” from our end.  
 
#Regarding I would like to have the item which is the most visible in the list 
 
We would like to inform you that you can achieve your requirement using ItemAppearing event of the SfListView. You can the Item using LastBodyVisibleLineIndex from ScrollRows. Please refer the following code snippet to achieve your requirement, 
 
Behavior 
public class Behavior : Behavior<ContentPage> 
{ 
    SfListView ListView; 
    VisualContainer Container; 
    ContactsViewModel ViewModel; 
 
    protected override void OnAttachedTo(ContentPage bindable) 
    { 
        ListView = bindable.FindByName<SfListView>("listView"); 
        ListView.ItemAppearing += ListView_ItemAppearing; 
        ViewModel = bindable.BindingContext as ContactsViewModel; 
 
        Container = ListView.GetVisualContainer(); 
 
        base.OnAttachedTo(bindable); 
    } 
 
    private void ListView_ItemAppearing(object sender, ItemAppearingEventArgs e) 
    { 
        var index = Container.ScrollRows.LastBodyVisibleLineIndex; 
        var item = ListView.DataSource.DisplayItems[index - 1] as Contacts; 
 
        ViewModel.VisibleItem = item.ContactName; 
    } 
} 
 
We have prepared sample based on your requirement and attached the sample and video in the following link, 
 
You can also refer our online document to get the last index when scrolling from the following link, 
 
#Regarding If not possible is it possible to show only one item visible and when I scroll it moves another item (1 by 1) and with only one visible? 
 
We would like to inform you that you can change the Visibility of the item by binding model property to the ItemTemplate IsVisible property. Using the same approach we have mentioned above, you can change the visibility of the item when it is appearing in the view. 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 


AL Alexis May 9, 2020 12:01 PM UTC

Thanks for your repsonse and I have tried.

But it doesn't fit my requirements.

Please see the picture.

I should have Ralph because it's the item which is the most visible.

Do you think it's possible?

For the second as an alternative if it's not possible I would like to do the same as what tiktok is doing such as scroll one by one (swipe).

I have tried and it's not working with visibilty proprtety.

Thanks



CS Chandrasekar Sampathkumar Syncfusion Team May 11, 2020 01:16 PM UTC

Hi Alexis, 
Thank you for the update. 
We are currently checking the scenario and we will update you further details on or before May 12, 2020. We appreciate your patience until then. 
Regards, 
Chandrasekar Sampathkumar 


CS Chandrasekar Sampathkumar Syncfusion Team May 12, 2020 05:03 PM UTC

Hi Alexis, 
Thank you for your patience. 
As promised we have prepared sample based on your requirement (Swipe one by one like Tiktok). Please refer the following code snippet to move to next item or previous item using PanGesture, 
C#: Detecting which direction to scroll and scroll to particular item 
private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e) 
{ 
    if(e.StatusType == GestureStatus.Completed) 
    { 
        int idx; 
        if((this.BindingContext as ContactsViewModel).Direction == 0) 
        { 
            idx = (this.BindingContext as ContactsViewModel).Index--; 
            if(idx > 0) 
            { 
                listView.LayoutManager.ScrollToRowIndex(--idx); 
            } 
        } 
        else 
        { 
            idx = (this.BindingContext as ContactsViewModel).Index++; 
            if (idx < listView.DataSource.DisplayItems.Count-1) 
            { 
                listView.LayoutManager.ScrollToRowIndex(++idx); 
            } 
        } 
    } 
    if (e.StatusType == GestureStatus.Running) 
    { 
        if(e.TotalY > 0) 
        { 
            (this.BindingContext as ContactsViewModel).Direction = 0; // Backward direction 
        } 
        else if(e.TotalY < 0) 
        { 
            (this.BindingContext as ContactsViewModel).Direction = 1; //Forward direction 
        } 
    } 
} 
We have prepared a sample based on your requirement and you can download the same using the following link, 
Sample Link: SfListViewSample 
Video Link: Video 
We have checked the sample in UWP and Android. The sample works as expected in UWP but there is a known framework issue in Android when using PanGestures. Please check the following bug report for more reference, 
Can you please mention the platform. 
Regards, 
Chandrasekar Sampathkumar 


AL Alexis May 12, 2020 06:25 PM UTC

Thanks it's for Android. 

I will check your response. Thanks a lot. I really apreciate your support!

CS Chandrasekar Sampathkumar Syncfusion Team May 13, 2020 09:30 AM UTC

Hi Alexis, 
Thank you for the update. 
We will wait for your response. 
Regards, 
Chandrasekar Sampathkumar 


AL Alexis May 13, 2020 10:44 AM UTC

Ok I tried but I could not have the requirement on ANdroid. 

I gusess it's due to the bug you explianed.

But I think the control is not made to do this.

Maybe I should use a carrousel such as: https://github.com/alexrainman/CarouselView

Rotator is equivalent?

THanks,

LN Lakshmi Natarajan Syncfusion Team May 14, 2020 11:08 AM UTC

Hi Alexis, 
 
We regret for the inconvenience caused. 
 
We would like to inform you that both CarouselView and SfRotator have the similar options which can be used to achieve your requirement. You can also refer the online documentation of SfRotator from the following link, 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarjaan 
 


Loader.
Up arrow icon