We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to detect scrolling direction in Xamarin Forms ListView (SfListView)

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: February 20, 2020 |
Last Revised Date: February 18, 2021

You can find the scrolling direction in Xamarin.Forms SfListView by using the Scrolled event of the ScollView.

XAML

In the SfListView.HeaderTemplate, bind the ViewModel property to show the scroll direction.

<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms">
    <syncfusion:SfListView x:Name="listView" 
                           ItemsSource="{Binding ContactsInfo}"
                           IsStickyHeader="True"
                           ItemSize="70">
        <syncfusion:SfListView.Behaviors>
            <local:Behavior/>
        </syncfusion:SfListView.Behaviors>
        <syncfusion:SfListView.HeaderTemplate>
            <DataTemplate>
                <Label Text="{Binding ScrollDirection}" />
            </DataTemplate>
        </syncfusion:SfListView.HeaderTemplate>
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Image Source="{Binding ContactImage}" 
                           Aspect="AspectFill"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactName}"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactNumber}"/>
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ContactType}"/>
                </Grid>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</ContentPage>
 

 

C#

You can get the ExtendedScrollView using the ListView.GetScrollView helper method and update the ScrollDirection value based on the previous offset.

public class Behavior : Behavior <SfListView>
{
    ExtendedScrollView scrollview;
    double previousOffset;
    public SfListView listview { get; private set; }
 
    protected override void OnAttachedTo(SfListView bindable)
    {
        base.OnAttachedTo(bindable);
        listview = bindable as SfListView;
        scrollview = listview.GetScrollView();
        scrollview.Scrolled += Scrollview_Scrolled;
    }
 
    private void Scrollview_Scrolled(object sender, ScrolledEventArgs e)
    {
        if (e.ScrollY == 0)
            return;
 
        if (previousOffset >= e.ScrollY)
        {
            // Up direction  
            viewModel.ScrollDirection = "Up Direction";
        }
        else
        {
            //Down direction 
            viewModel.ScrollDirection = "Down Direction";
        }
 
        previousOffset = e.ScrollY;
    }
}

View sample in GitHub

Scrolling direction in ListView

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Amir H
Feb 14, 2021

Where is previousOffset defined? What's the use of scrollOffet?

Reply
Jawad
Feb 17, 2021

go to github sample to see the full code Bro...

Jawad
Feb 17, 2021

ok i have implemented it and ran it...it worked perfectly at my side...the above example is much complicated and should have been avoided... there is no use of scrolloffset discard it...

Jawad
Feb 17, 2021

let me know if you need help...

Lakshmi Natarajan [Syncfusion]
Feb 18, 2021

Hi Amir/Jawad,

Greetings from Syncfusion.

We have removed the unwanted codes and updated the sample and document.

Regards, Lakshmi Natarajan

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon