Blazor - support variable height items in Virtualize component

[radderz]

When create a listview of similarly sized items, it's very hard to virtualise this in most web frameworks currently. It'd be great for Blazor to provide an out of the box solution that is able to render a virtual list of items, and account for it's position in the list as items are rendered. Most of my implementations of lists are of items that don't vary in size all that greatly, i.e. an extra line or two of text per item due to some wrapping.

This would need to be able to handle data updates over time, so it shouldn't remember the size of the item when it goes back out of the view port and if the item is in the viewport it should account for the change in size after an update while assuming an approximate size for the not currently visible items.

My concept is to try to have the scroll bar managing the item number through the list rather than the absolute x position, then to show the item at the top that matches closest to that by %, if snapping the items makes this easier that may be an approach.

Basically you'd know the items sizes currently in the viewport, and as the user scrolls, the overall size of the view port would adjust based on the currently visible items actual size + the amount of items above * approx size + the amount of items below * approx size.

This is done well in Xamarin, but that is a non web framework so I guess it's a little easier to control the outcome.

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[mrpmorris]

How could you know the sizes of items not currently in the DOM?

[radderz]

We wouldn't know the exact size but we could know an approx height of an average item, then when it enters the view you know the actual size. This wouldn't work well for highly varied items sizes, but if you have a known templated list where items are mostly similar sizes it may be possible. How does Xamarin do it on mobile?

[legistek]

How could you know the sizes of items not currently in the DOM?

You guess until you actually need to know. Then render them in a hidden div off screen and measure it.

How does Xamarin do it on mobile?

I believe they rely on the individual platforms for virtual scrolling. WPF and UWP both have built in virtualizing panels that support arbitrary heights. I have to assume iOS and Android do as well.

This could certainly be done in Blazor though. See the part of the best Microsoft UI framework ever made for inspiration:

https://github.com/dotnet/wpf/blob/master/src/Microsoft.DotNet.Wpf/src/PresentationFramework/System/Windows/Controls/VirtualizingStackPanel.cs

No, it's not easy. There's a complex relationship between the ItemsControl, the ItemsSource, ItemContainers and ItemContainerGenerator, and a lot of other moving parts. It also helps that WPF handles all measuring and layout, so it can determine the height of an offscreen container without actually rendering it (but you could do this with JS; see above).

All that said, if you didn't need smooth pixel scrolling, but instead were ok with scrolling in row-sized increments, the problem becomes an order of magnitude less complex.

In either case, though, you probably have to ditch the browser's built in scrolling mechanism and devise your own, which means your own scrollbar component with a thumb, track, etc. But there would be huge advantages to that anyway besides supporting virtual scrolling.

In any event, I don't think this is something we should reasonably expect the Microsoft team to implement, but I think the door is wide open for a component developer to do it.

[radderz]

@legistek I haven't seen any good component that implements this from the component vendors like Telerik, Syncfusion etc on their web frameworks, this would make Blazor really compelling to me as it would remove the biggest pain point I have with HTML5, if the base virtualize container was capable of this, it'd make a lot of UIs and other components much easier to build while maintaining that benefit of virtualizing the large lists.

It is base level functionality of a virtual scrolling system on mobile but I do understand that they are running native UI which enables more control over the resulting scroll behaviour.

[legistek]

I recently discovered the Microsoft Fluent UI React controls and they support virtualization with arbitrary and variable row heights:

https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights

It's quite good. Not as good as the virtualizing panels in the native Windows XAML platforms but still very good. I haven't delved into the code to see how they work but by definition if it can be done in React it could be done in Blazor.