FormattedString is killing my listview

msdYqbmsdYqb USMember ✭✭

hi everyone

so basically after updating Xamarin forms to latest version the listview become to slow

after a lot of investigations I found out the FormattedString to be the problem

my listview only show text

what i have done is splitting the text into words and add each word in span

why would that slow down scrolling???
this is unacceptable and I believe its a bug

thanks

Posts

  • CharwakaCharwaka INMember ✭✭✭✭✭

    Why don't you do that in code behind and supply to UI ?

  • msdYqbmsdYqb USMember ✭✭

    ok so I did some test in new project
    exactly the same result !

    namespace App1
    {
        class MyClass
        {
            public string Text { get; set; }
            public FormattedString FormattedText { get; set; }
        }
        public partial class MainPage : ContentPage
        {
            public MainPage()
            {
                InitializeComponent();
            }
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                List<MyClass> list = new List<MyClass>()
                {
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"},
                    new MyClass{ Text = "Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text"}
                };
                foreach (var item in list)
                {
                    var words = item.Text.Split(' ');
                    item.FormattedText = new FormattedString();
                    foreach (var word in words)
                    {
                        item.FormattedText.Spans.Add(new Span { Text = word });
                    }
                }
                listview.ItemsSource = list;
            }
        }
    }
    
    
    
            <ListView x:Name="listview">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.View>
                            <Label FormattedText="{Binding FormattedText}"></Label>
                            </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    
  • msdYqbmsdYqb USMember ✭✭

    downgrade to Xamarin froms 2.5.0.91635 and the result is much much more smoother scrolling

    this is definitely a bug !

  • kingkanekingkane Member ✭✭

    I'm having the same problem, so I'm just not going to use the FormattedString in a ListView.

  • kingkanekingkane Member ✭✭

    The funny thing is, this link recommends using the FormattedString:

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/listview/performance

  • gingerdudegingerdude USMember ✭✭

    I found that formatted strings tend to be slower than separate spans even before this issue. Not sure why.

  • msdYqbmsdYqb USMember ✭✭
    edited September 12

    for me formatted string is a must!

    so what I did instead of adding each word in a span

    I combined all words of same color in span
    so the result would be much less spans
    it does improve the performance but there is defiantly sluggish in scrolling

    my advice to you try to make fewer spans as much as possible

    now im looking for another solution I might decrease listview rows to 50

    then show other rows when scrolling down listview
    I don't know if that possible

Sign In or Register to comment.