SfListView Scrolling Performance is Slow – Need Assistance

[Nguy?n Th?nh]

Hello Syncfusion Team,

I'm experiencing performance issues with the SfListView in my .NET MAUI application. When scrolling through a list with items, the scrolling becomes noticeably laggy, which is affecting the user experience.

Environment Details:

• Framework: .NET MAUI (version 8.0)
• Syncfusion Package: Syncfusion.Maui.ListView (version 28.1.33)
• Platform: iOS/Android

Issue Description:

• When scrolling the list, there is significant lag and stuttering.
• I am using a custom item template that includes onlhy a few label and badge
• The issue is consistently reproducible on both physical devices and simulators
  

i did not have this problem with xamarin syncfusion. Are there any known performance improvements or best practices for optimizing SfListView when working with complex item templates in .NET MAUI?

Edit: Here is my sample code

ItemTemplate = new DataTemplate(() => new FTLItemMenu())

public class FTLItemMenu : ViewCell

{

public FTLItemMenu()
{
    if (type == ViewType.Grid)
    {
        View = HorizontalView(sender, invoke, invoke2);
        return;
    }

    View = VerticalView(sender, invoke, invoke2);
}

private View VerticalView(object sender, Action<object, IFDataEvent> action, Action<object, IFDataEvent> action2)
{
    var stack = new Grid();
    stack.AddColumnDefinition(new ColumnDefinition(GridLength.Auto));
    stack.AddColumnDefinition(new ColumnDefinition(GridLength.Star));
    stack.AddColumnDefinition(new ColumnDefinition(GridLength.Star));
    var badge = new SfBadgeView();
    var icon = new Image();
    var label = new Label();
    var res = new FButtonEffect(sender, action, action2) { Content = stack };

    badge.HorizontalOptions = LayoutOptions.End;
    badge.VerticalOptions = LayoutOptions.Center;
    // badge.BadgeSettings.StrokeThickness = 2;
    badge.BadgeSettings.FontFamily = Setting.FontText;
    badge.BadgeSettings.FontSize = 10;
    badge.BadgeSettings.Type = BadgeType.None;
    badge.BadgeSettings.Position = BadgePosition.Right;
    badge.BadgeSettings.Animation = BadgeAnimation.None;
    badge.BadgeSettings.SetBinding(BadgeSettings.BackgroundProperty,   ItemMenu.BadgeColorProperty.PropertyName);
    badge.SetBinding(SfBadgeView.BadgeTextProperty, ItemMenu.BadgeTextProperty.PropertyName);

    label.MaxLines = 1;
    label.FontSize = Setting.FontSizeLabelTitle;
    label.TextColor = Setting.TextContentColor;
    label.LineBreakMode = LineBreakMode.TailTruncation;
    label.HorizontalOptions = LayoutOptions.StartAndExpand;
    label.VerticalOptions = LayoutOptions.Center;
    label.SetBinding(Label.TextProperty, ItemMenu.BarProperty.PropertyName);

    icon.HeightRequest = icon.WidthRequest = Setting.SizeIconButton + 3;
    icon.VerticalOptions = LayoutOptions.Center;
    icon.SetBinding(Image.SourceProperty, ItemMenu.IconUrlProperty.PropertyName);

    stack.HorizontalOptions = stack.VerticalOptions = LayoutOptions.FillAndExpand;
    stack.HeightRequest = 50;
    stack.ColumnSpacing = 10;
    stack.Add(icon,0,0);
    stack.Add(label,1,0);
    stack.Add(badge,2,0);
    res.HeightRequest = 50;
    res.Padding = new Thickness(10, 0);
    return res;
}

private View HorizontalView(object sender, Action<object, DataEvent> action, Action<object, DataEvent> action2)
{
    var icon = new Image();
    var label = new Label();
    var r = new StackLayout();
    var badge = new SfBadgeView();
    var res = new FButtonEffect(sender, action, action2);

    badge.BadgeSettings.StrokeThickness = 2;
    badge.BadgeSettings.FontFamily = Setting.FontText;
    badge.BadgeSettings.Stroke = Setting.MainColor;
    badge.BadgeSettings.Type = BadgeType.None;
    badge.BadgeSettings.Offset = new Point(-10,5);
    badge.BadgeSettings.Animation = BadgeAnimation.None;
    badge.BadgeSettings.FontSize = FSetting.FontSizeBadge;
    badge.BadgeSettings.SetBinding(BadgeSettings.BackgroundProperty, ItemMenu.BadgeColorProperty.PropertyName);
    badge.SetBinding(SfBadgeView.BadgeTextProperty, FItemMenu.BadgeTextProperty.PropertyName);

    label.MaxLines = 2;
    label.FontSize = Setting.FontSizeLabelTitle;
    label.TextColor = Setting.TextContentColor;
    label.LineBreakMode = LineBreakMode.WordWrap;
    label.HorizontalTextAlignment = TextAlignment.Center;
    label.SetBinding(Label.TextProperty, FItemMenu.BarProperty.PropertyName);

    icon.Margin = new Thickness(0, 10, 0, 0);
    icon.HeightRequest = icon.WidthRequest = Setting.SizeIconButton + 3;
    icon.HorizontalOptions = icon.VerticalOptions = LayoutOptions.Center;
    icon.SetBinding(Image.SourceProperty, ItemMenu.IconUrlProperty.PropertyName);

    r.HeightRequest = Setting.SizeIconButton + Setting.FontSizeLabelTitle * 2 + 30;
    // r.Children.Add(icon, Constraint.RelativeToParent((parent) => parent.Width / 2 - (FSetting.SizeIconButton) / 2), Constraint.Constant(5), Constraint.Constant(FSetting.SizeIconButton));
    // r.Children.Add(badge, Constraint.RelativeToParent((parent) => parent.Width / 2), Constraint.Constant(1));
    // r.Children.Add(label, Constraint.Constant(0), Constraint.RelativeToParent((parent) => parent.Height / 2 - 5), Constraint.RelativeToParent((parent) => parent.Width));
    r.Spacing = 5;
    // r.Children.Add(icon);
    badge.Content = icon;
    r.Children.Add(badge);
    r.Children.Add(label);
    res.Content = r;
    res.Padding = new Thickness(10, 8, 10, 5);
    return res;
}

​

}

[Sowntharya Jayamoorthy]

Hi Customer,

We have created sample with ItemTemplate code shared by you. Since, SfListView is a virtualized control (item reuse strategy) which means that whenever an item comes into the screen during scrolling, binding context of that item will be updated. So, each item triggers layout calls for all the controls inside the item template, whenever the item's binding context is updated. Consequently, this takes time for loading the data and assigning the height according to the content inside during scrolling. To improve scrolling performance, especially when using images, the ImageSource is refreshed during scrolling, and the default .NET MAUI image handling can impact performance. To address this, we recommend utilizing FFImageLoading for rendering images and setting explicit dimensions for the images to enable faster rendering.(Attached sample for your reference with FFImageLoading)

FFImageLoading Package link:   https://www.nuget.org/packages/FFImageLoading.Maui

Code snippet:

private View VerticalView(object sender, Action<object, IFDataEvent> action, Action<object, IFDataEvent> action2)

 {

    

     var icon = new MenuIcon();

     ------------

 

     icon.SetBinding(MenuIcon.SourceProperty, nameof(ItemMenu.Image));

     icon.HeightRequest = 50;

     icon.WidthRequest = 50;

     icon.VerticalOptions = LayoutOptions.Center;

 

     -----------

 }

 

 

public class MenuIcon : CachedImage

{

    public MenuIcon()

    {

        // Optional: Enable caching for better performance

       CacheDuration = TimeSpan.FromDays(30);

       DownsampleToViewSize = true;

    }

}

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui

                          xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml

                          xmlns:list="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"

                          xmlns:ffimageloading="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"

                      >

 …

                    

 <ffimageloading:CachedImage Source="dotnet_bot.png" />

 …

To ensure FFImageLoading functions correctly in your .NET MAUI application, please register it in MauiProgram.cs by adding the following line inside the builder configuration:

    public static class MauiProgram

    {

        public static MauiApp CreateMauiApp()

        {

            var builder = MauiApp.CreateBuilder();

            builder

                .UseMauiApp<App>()

                .ConfigureFonts(fonts =>

                {

                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

                });

 

#if DEBUG

                              builder.Logging.AddDebug();

#endif

            builder.ConfigureSyncfusionCore();

            builder.UseFFImageLoading();

            return builder.Build();

        }

    }

Additionally, leveraging Compiled Bindings can significantly enhance data binding performance in .NET MAUI applications.Compiled binding UG: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/compiled-bindings?view=net-maui-9.0

                                                                                       (or)
To improve scrolling with complex layout inside ListView, we recommend setting "SfListView.IsScrollEnabled" to false (to skip the virtualization) and wrapping the ListView with a ScrollView. This approach loads all items in the ItemsSource initially, measuring and arranging them upon loading, thus avoiding layout calls during scrolling.

https://help.syncfusion.com/maui/listview/working-with-sflistview?cs-save-lang=1&cs-lang=xaml#improving-listview-performance

Note: Disabling virtualization may result in a delay during item loading since all items are loaded at once.

<ScrollView>

        <listview:SfListView x:Name="listView"

                                       IsScrollingEnabled="False">

                             ----------   

        </listview:SfListView>

</ScrollView>

Please let us know if you have any further questions or need additional assistance.

Regards,
Sowntharya J.

Attachment: ListviewScrollingSample_d38cd897.zip

[Nguy?n Th?nh]

i've have the issue with when i'm set Scrollview content is listview in a stack but it does not work as intend 

var ab = new AbsoluteLayout
{
    BackgroundColor = Colors.White, VerticalOptions = LayoutOptions.StartAndExpand,
    HorizontalOptions = LayoutOptions.StartAndExpand
};
var st = new StackLayout { Margin = 0, Spacing = 0, BackgroundColor = Colors.White };
var lo = new BoxView
{
    BackgroundColor = Colors.White, HeightRequest = FSetting.ScreenHeight,
    WidthRequest = FSetting.ScreenWidth
};
SmoothScroll.Content = Listview;
SmoothScroll.VerticalOptions = LayoutOptions.FillAndExpand;
var ls = new Line { BindingContext = this };
var lm = new Line { BindingContext = this };
var lp = new Line { BindingContext = this };
var lt = new Line { BindingContext = this };
var la = new Line { BindingContext = this };
var ln = new Line { BindingContext = this };
var lf = new Line { BindingContext = this };
var lc = new Line { BindingContext = this };


st.Children.Add(SmoothScroll);
st.Children.Add(lc);
st.Children.Add(comment);


AbsoluteLayout.SetLayoutBounds(lo, new Rect(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(lo, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(st, new Rect(0, 0, 1, 1));
AbsoluteLayout.SetLayoutFlags(st, AbsoluteLayoutFlags.All);

lo.SetBinding(BoxView.IsVisibleProperty, IsLoadingViewProperty.PropertyName);
lo.BindingContext = this;

ab.Children.Add(st);
ab.Children.Add(lo);

[Nguy?n Th?nh]

nevermind. i fixed it

[Sowntharya Jayamoorthy]

Hi Customer,

We are glad you found your solution, please let us know if you need any further assistance. Feel free to open a new ticket for any new issue that may arise.

Regards,
Sowntharya J

[Nguyen Thinh]

hi, i have new problem with wrapping the ListView with a ScrollView that the 

LoadMoreOption.AutoOnScroll

does not work at intend.

[Abinesh Palanisamy]

Hi ,
 

We understand you're experiencing issues with LoadMoreOption.AutoOnScroll not working as expected when wrapping the SfListView inside a ScrollView. This behavior is actually a known limitation.

 

When SfListView.IsScrollEnabled is set to false and the ListView is wrapped inside a ScrollView, the internal scrolling mechanism of the ListView is restricted. This affects below features that rely on built-in scrolling, such as:

 

• Auto scrolling during drag-and-drop
• Virtualization
• Load more functionality
• Programmatic scrolling

 

This is expected behavior due to the way ScrollView interferes with the internal scroll events of SfListView.

 

In our previous response, we also suggested alternative approaches to improve performance without using a ScrollView. These include:

 

• Use FFImageLoading to improve image rendering and reduce memory usage, especially for large lists or high-resolution images.

 

• Use Compiled Bindings to make data binding faster and more efficient than regular bindings.

 

Have you had a chance to try these approaches? They can help maintain the full functionality of SfListView while improving overall performance.

 

Regards,

Abinesh P

[Nguyen Thinh]

hi i have another issue with this problem, currently i have a listview (in scrollview) that add item real time (like a chat)  then when the item is added the height is still the old heigh (inital load). From my understanding when set listview to

IsScrollingEnabled = false

then it will load the entire items of the list.  Here is my code, hope you can help us soon

ChatView = new SfListView();
ChatView.ItemSpacing = 5;
ChatView.IsScrollingEnabled = false;
ChatView.ItemTemplate = messageTemplateSelector;
ChatView.SelectionBackground = Brush.Transparent;
ChatView.AutoFitMode = AutoFitMode.DynamicHeight;
ChatView.ScrollBarVisibility = ScrollBarVisibility.Never;
ChatView.SelectionMode = Syncfusion.Maui.ListView.SelectionMode.None;
ChatView.VerticalOptions = LayoutOptions.FillAndExpand;
ChatView.HorizontalOptions = LayoutOptions.FillAndExpand;
ChatView.ShowItemBorder = true;
ChatView.SetBinding(SfListView.ItemsSourceProperty, nameof(ChatGPTModel.Messages));
// ChatView.SizeChanged += (sender, args) =>
// {
//     Device.BeginInvokeOnMainThread(() =>
//     {
//         ChatView.InvalidateMeasure();
//     });
// };
return new ScrollView 
{ 
    Content = ChatView, 
    VerticalScrollBarVisibility = ScrollBarVisibility.Never, 
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
};

[Abinesh Palanisamy]

Hi Nguyen,

Based on the details and the code snippet you shared, we’ve prepared a sample chat application using SfListView within a ScrollView as its parent, configured with the required properties. Upon testing on our end using the latest version of SfListView (v31.1.17), the runtime chat rendered correctly, and we were able to scroll through the ListView without any issues.

 

To assist you further, we’ve included:

 

• A sample project demonstrating the setup.
• A video sample showcasing the runtime behavior for reference.

 

If you’re still encountering issues on your end, please share the following details to help us investigate further:

 

• A runnable sample or a modified version of the sample that replicates the issue.
• The entire layout configuration, including how the chat is managed and implemented.
• Device details used during testing.

 

This information will help us better understand the specific conditions under which the issue occurs and allow us to provide more targeted support.

 

Regards,

Abinesh P

Attachment: ListView_a8eb73bd.zip