How to find the scrolling direction in .NET MAUI ListView(SfListView)?

In .NET MAUI ListView, you can detect the scrolling direction using the Scrolled event of the ScrollView.

Steps to Detect Scrolling Direction

1. Bind a ViewModel property to the SfListView.HeaderTemplate, to display the scroll direction.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             x:Class="YourNamespace.MainPage">
    <syncfusion:SfListView x:Name="listView" ItemSize="60" IsStickyHeader="True" ItemsSource="{Binding ContactsInfo}">
        <syncfusion:SfListView.Behaviors>
            <local:ListViewBehavior />
        </syncfusion:SfListView.Behaviors>
        <syncfusion:SfListView.HeaderTemplate>
            <DataTemplate>
                <Label Text="{Binding ScrollDirection}" 
                       FontSize="Default" 
                       FontAttributes="Italic" 
                       HorizontalOptions="CenterAndExpand" 
                       VerticalOptions="CenterAndExpand"/>
            </DataTemplate>
        </syncfusion:SfListView.HeaderTemplate>
        <syncfusion:SfListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <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">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Label LineBreakMode="NoWrap" 
                               TextColor="#474747" 
                               Text="{Binding ContactName}"/>
                        <Label Grid.Row="1" 
                               TextColor="#474747" 
                               LineBreakMode="NoWrap" 
                               Text="{Binding ContactNumber}"/>
                    </Grid>
                </Grid>
            </DataTemplate>
        </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
</ContentPage>

2. Use C# code to get the ListViewScrollView using the ListView.GetScrollView helper method. Then, update the ScrollDirection value based on the previous offset.

C#

using Syncfusion.Maui.ListView;
using Microsoft.Maui.Controls;

public class ListViewBehavior : Behavior<SfListView>
{
    private ContactsViewModel viewModel;
    private ListViewScrollView scrollView;
    private double previousOffset;
    public SfListView ListView { get; private set; }

    protected override void OnAttachedTo(SfListView bindable)
    {
        base.OnAttachedTo(bindable);
        ListView = bindable;
        viewModel = new ContactsViewModel();
        ListView.BindingContext = viewModel;
        scrollView = ListView.GetScrollView();
        scrollView.Scrolled += ScrollView_Scrolled;
    }

    protected override void OnDetachingFrom(SfListView bindable)
    {
        base.OnDetachingFrom(bindable);
        if(scrollView != null)
        {
            scrollView.Scrolled -= ScrollView_Scrolled;
        }
        scrollView = null;
        ListView = null;
        viewModel = null;
    }

    private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        if (e.ScrollY == 0) return;

        viewModel.ScrollDirection = previousOffset >= e.ScrollY ? "Up Direction" : "Down Direction";
        previousOffset = e.ScrollY;
    }
}

In this code, previousOffset stores the previous scroll position. The ScrollY property of the scrollView object provides the current scroll position. By comparing these values, the scroll direction (‘Up’ or ‘Down’) is determined.

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to detect scroll direction in .NET MAUI ListView.

You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI ListView example to understand how to create and manipulate data.

You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!