How to maintain scroll while updating Itemsource in.NET MAUI ListView (SfListView)?

The .NET MAUI ListView typically scrolls to the top when the ItemsSource is updated at runtime. However, you can maintain the current scroll position using the SfListView.CanMaintainScrollPosition property by setting it to true before updating the ItemsSource. This ensures that the scroll position remains unchanged.

XAML
Set CanMaintainScrollPosition to true to maintain the scroll position after updating the ItemsSource.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="ListViewMaui.MainPage"
             xmlns:local="clr-namespace:ListViewMaui"
             xmlns:listview="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             xmlns:datasource="clr-namespace:Syncfusion.Maui.DataSource;assembly=Syncfusion.Maui.DataSource">

    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Button x:Name="updateButton" Text="Update ItemsSource" HeightRequest="50" Clicked="UpdateButton_Clicked"/>

            <listview:SfListView x:Name="listView" Grid.Row="1" 
                                 CanMaintainScrollPosition="True" ItemSize="70" 
                                 ItemsSource="{Binding ContactsInfo}">
                <listview:SfListView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Grid x:Name="grid" RowSpacing="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="70"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding ContactImage}" HeightRequest="50" WidthRequest="50" Margin="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Label Text="{Binding ContactName}" VerticalOptions="CenterAndExpand"/>
                                    <Label Grid.Row="1" Text="{Binding ContactNumber}" VerticalOptions="StartAndExpand"/>
                                </Grid>
                            </Grid>
                            <BoxView HeightRequest="1" BackgroundColor="#EEEEEE"/>
                        </StackLayout>
                    </DataTemplate>
                </listview:SfListView.ItemTemplate>
            </listview:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#

internal class Behavior : Behavior<ContentPage>
{
    #region Fields

    SfListView ListView;
    Button UpdateButton;
    ListViewScrollView ScrollView;
    #endregion
    
    #region Overrides
    
    protected override void OnAttachedTo(ContentPage bindable)
    {
        ListView = bindable.FindByName<sflistview>("listView");
        UpdateButton = bindable.FindByName</sflistview></contentpage></button><button>("updateButton");
        
        UpdateButton.Clicked += UpdateButton_Clicked;
        
        base.OnAttachedTo(bindable);
    }
    
    protected override void OnDetachingFrom(ContentPage bindable)
    {
        UpdateButton.Clicked -= UpdateButton_Clicked;
        UpdateButton = null;
        ListView = null;
        base.OnDetachingFrom(bindable);
    }
    #endregion
    
    #region Callback
    
    private void UpdateButton_Clicked(object sender, EventArgs e)
    {
        var viewModel = ListView.BindingContext as ContactsViewModel;
        viewModel.GenerateInfo();
        ListView.ItemsSource = viewModel.ContactsInfo;
    }
    
    #endregion
}

Output

Take a moment to peruse the documentation to learn more about scrolling in SfListView with a code example.

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to maintain scroll while updating the ItemsSource 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.

For current customers, check out our components from the License and Downloads page. 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 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!