Major Bugs in Vol 4 SfListView (24.1.24) - Android - Initially Offscreen Items/Templates Not Rendering correctly

[Niall]

Hi,

There's some major problems with the SfListView under Android in the new Vol 4 (24.1.24) Release that just came out. (Note: iOS appears to be working fine - seems to just be an issue on Android).

For items that are initially off screen (ie. further down in the list beyond height of screen) - when scrolling down to those items, the rendering is all messed up. Child UI Elements are either in wrong positions or not being rendered at all.

For example :

In screenshot below (Android 13) - the last 2 x items have exact same Item Template as the others, but as you can see the child elements are in wrong positions and truncated.. These 2 x items are both off screen to start with and then when I scroll down in the List it looks like this. When I scroll back up and down occasionally it will either sort these items out or it mess up other items at start of list (this seems to be a bit random).

I have seen this all across our App which was working perfectly fine with last release of Vol 3. This happens both with and without grouping and also no matter what AutoFitMode is in use (both DynamicHeight and Height with size set). It also happens when Load More is in use too (and also when it isn't). So it doesn't appear to be any of these things causing it.

At a guess : From what I can tell, it would appear the items are potentially not being given the correct width by the pre-renderer (or maybe height as well). And then when items scroll into view they aren't getting refreshed with correct dimensions.

As per above, this is just happening with Android - iOS seems to actually be working quite well.

If you can please issue an urgent fix for this that would be appreciated - we are really needing to implement the new controls in Vol 4 (and have been waiting patiently) and having to revert back to Vol 3 would not be great.

thanks

Niall

[RiyasHameed MohamedAbdulKhader]

Hi Naill,

We have reviewed the issue you reported and created a sample based on the provided information. The sample worked as expected during our testing with the Android 13 simulator. We have attached a video and code snippet for your reference.

Code Snippet

<syncfusion:SfListView x:Name="listView"

                        ItemSpacing="10"

                        ItemsSource="{Binding Items}">

    <syncfusion:SfListView.ItemTemplate>

        <DataTemplate>

            <ViewCell>

                <Border>

                    <Border.StrokeShape>

                        <RoundRectangle CornerRadius="5" />

                    </Border.StrokeShape>

                    <Grid ColumnDefinitions="*,50,50">

                    <Label Text="{Binding Name}" Grid.Column="0" />

                        <Border Grid.Column="1"

                                Padding="10"

                                Margin="10"

                                HorizontalOptions="End"

                                VerticalOptions="Center">

                            <Border.StrokeShape>

                                <RoundRectangle CornerRadius="10" />

                            </Border.StrokeShape>

                            <Image Source="download.png"

                            HeightRequest="25"

                            WidthRequest="25" />

                        </Border>

                        <Border Stroke="Black" Padding="10"

                                HorizontalOptions="End"

                                Margin="10"

                                VerticalOptions="Center"

                                Grid.Column="2">

                            <Border.StrokeShape>

                                <RoundRectangle CornerRadius="10" />

                            </Border.StrokeShape>

                            <Image Source="images.png"

                            HeightRequest="25"

                            WidthRequest="25" />

                        </Border>

                    </Grid>

                </Border>

            </ViewCell>

        </DataTemplate>

    </syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

To further investigate and address the query, could you please share the code snippet related to SfListView? This information will be valuable for us to conduct a more thorough validation.

Regards,
Riyas Hameed M

Attachment: ListViewMaui_(2)_63eeaa72.zip

[Niall]

Hi Riyas,

I agree that your isolated sample with single page/only SfListView referenced is not reproducing this problem. However, that unfortunately does not solve the issue - we are definitely seeing it all across our existing App with Vol 4.

I am assuming it's a more complex set of preconditions which is triggering the problem. 

Just to clarify again - the moment I revert our code back to Vol 3 (23.2.7) without changing anything else at all, then everything is working fine. When I change the project to reference Vol (24.1.24) then the problem exists again. So I'm definitely sure the Vol 4 release is the problem.

I would urge you to please keep trying to find what is causing this as only your team would understand what changed in the new release. It's causing major issues for us.

thanks

Niall

[Niall]

Hi,

Ok I did some modifications to the source code you provided which is now showing this problem occurring - please see attached .zip file.

These are the changes I made : 

• Increased number of items to 400 to give it a bit more load
  
• Set AutoFitMode to DynamicHeight
• Added a bool property for the items 'ShowExtra' which is set to true for every 5th item (to allow for different rendering)
• Added a lot of complexity to the ItemTemplate including use of nested Horizontal/Vertical Stack Layouts (which better represents complexity of layouts I am using).
• Used the above ShowExtra bool field to toggle whether certain elements are visible or not in the ItemTemplate which will then modify the required final height of the item.

It's crude/messy - but it demonstrates how child UI Elements are randomly being not shown at all and how the layout is getting completely messed up.

Here is a screenshot of it with some annotations to show what I am seeing : 

Note the following problems above (note that items with yellow square are every 5th item which has ShowExtra bool field enabled) : 

1. Item 181 should not be showing all that extra space - it should be same height as Item 182 - 184.
   This provides example of the layout going all wrong.
2. Item 185 fails to show the additional lines - ie. 'More Text' and 'And another line' even though ShowExtra is true for this item.  
   This provides example of child UI Elements just not being rendered at all that should definitely be shown.
3. Not a major concern (and probably a MAUI bug) also note text wrapping isn't working in there and also the 3rd line is being cut off vertically so the item isn't allowing for the full height required by the element.
   This also provides further examples of how correct sizes are not being calculated correctly & child elements not being rendered correctly.

Note that as you scroll up and down the list you see all sorts of random behaviour with these items. It's not making consistent mistakes - different all over the place. It really does feel like there is something totally broken with the item measurement system here for Android with your new Vol 4 release.

Hope this now provides something to work with & to fix these issues urgently (it's really causing a big problem for us as we need Vol 4 right now for the new controls).

thanks

Niall

Attachment: ListViewMaui_857547a.zip

[RiyasHameed MohamedAbdulKhader]

Hi Niall,
We've investigated the query you reported using the provided sample, and we were able to reproduce the issue on our end. Our suspicion is that the problem might be stemming from a lack of layout calls from the framework, resulting in improper updating of the item height. We require additional time to thoroughly validate this issue. we will provide you with the update on Dec 22,2023. We appreciate your patience until then.

Regards,
Riyas Hameed M

[Niall]

Hi Riyas,

Thanks for the update - good to hear that you are now able to reproduce it on your end as well which will help you investigate + solve this issue. Please keep me updated of progress - hopefully this can be sorted soon.

thanks

Niall

[RiyasHameed MohamedAbdulKhader]

Hi Niall,

We have reanalyzed the reported query. During scrolling, items will be reused, hence measuring the content(View Cell) with same width and infinite Height returns previous measured size(measure call to the descendent child might get skipped). To resolve this issue, we recommend using a Grid instead of ViewCell or removing the ViewCell in ItemTemplate of ListView. I hope this helps! Please feel free to ask if you have any further questions or if there's anything else I can assist you with.

Code snippet

Regards,

Riyas Hameed M

[Niall]

Hi Riyas,

I just want to confirm that we do not use ViewCell in our App, we use Grid (and in some cases Border) - I only included it in the repro sample as that is what yours was based on. The problem still occurs without using ViewCell so this is not a solution unfortunately.
Note - I've also tried using the CachingStrategy property to CreateNewTemplate & while this is a bit more stable the  performance takes a considerable hit and is unusable.

Again, I'd urge you to try to work out what your team changed between Vol 3 and Vol 4 for the Android implementation - it was working reasonably well in Vol 3 (slow performance but at least it did not have this major bug).

thanks
Niall

[Suthi Yuvaraj]

Hi Niall,

 

Sorry the inconvenience,

 

We have checked the all the code changes made in Vol 3 and Vol 4 releases and found that unfortunately some codes regarding to item-reusing case was removed in Vol 4 release. So, we planned to include those code changes in our upcoming weekly nuget on January 03,2023. In the meantime, we have prepared the custom nuget package with the required fixes. We kindly request you to use this custom nuget package as temporary solution until January 03, 2023.

 

Note : Please clear the nuget cache before installation.

 

Thank you for your understanding and cooperation.

Regards,

Suthi Yuvaraj

Attachment: nuget_f763a63b.zip

[Niall]

Hi Suthi,

Thanks for the update & that's great news to hear you have located & solved this problem.

I look forward to using the new version when it's available on January 3rd - until then unfortunately it's very complicated to patch in temporary releases not available via Nuget into our DevOps pipelines (which is what we need for testing Release iOS builds). I will however see if I can patch it in local dev environment prior to then on Android and see if it works at all.

thanks
Niall

 

[Suthi Yuvaraj]

Niall,

We glad to inform you that we have fixed the reported issue “Android SfListView Items doesnot render properly” and included the issue fix in our latest NuGet release update version 24.1.44 which is available for download (https://www.nuget.org/).  We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance. 

[Niall]

Hi Suthi,

Just confirming the rendering issues seem to be fixed now in the 24.1.44 release - thanks for sorting that out.

However there are 2 x other issue with SfListView which are causing problems for us (mainly on iOS), I will post separate messages for these with more details : 

• LoadMore not working correcting on iOS - works for the first batch of updates but then never calls the LoadMoreCommand when the bottom of list is reached 2nd time.
• Header template is not correctly resizing the height when the contents change.

thanks
Niall

[Suthi Yuvaraj]

Niall , 

We are glad that the reported issue has been resolved.Also Kindly check the separate forums you have created for the issue your facing in SfListView  for further follow ups. Please let us know if you have any concerns.