Feature Request: Support both width and height in Blazor Virtualize

[wwarby]

Is your feature request related to a problem? Please describe.

I am trying to display several thousand image thumbnails in a grid layout with Blazor and virtualize scrolling through the thumbnail gallery to improve performance.

Describe the solution you'd like

The ability to set both the known width and height of the elements within a <Virtualize> component in Blazor, and have the virtualization take into account multiple items per "row", whether the number of items per "row" is dynamic based on the available width of the container and the provided ItemWidth. Something like this:

<div>
  <Virtualize Items="@images" ItemWidth="200" ItemHeight="200">
    <div style="display: inline-block; width: 200px; height: 200px;">
      <img src="@context.Url" />
    </div>
  </Virtualize>
</div>

Additional context

Apologies if this is somehow already possible and a couple of hours of Googling hasn't led me to the answer - I'm new to Blazor.

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[SteveSandersonMS]

Thanks for the suggestion.

Because of the complexity of implementing this, I think it's unlikely that we'll extend <Virtualize> to support simultaneous 2-dimensional scrolling any time soon. We would only attempt that if it becomes a very common request. Sorry about that!

We'll leave it on the backlog.

[wwarby]

Thanks for the response - just in case I misrepresented the requirement, I want to be clear that I didn't mean for a horizontal scrollbar to exist, only that it would be possible for items be placed side by side and wrap onto the next line. In other words think like how Windows Explorer works in "Large Icons" mode - so if each "tile" is a defined to have a fixed width and height, the grid would fit as many tiles horizontally as the container can take, then wrap onto the next line, and the virtualizer would be aware of the tile width and container width such that it can figure out how many tiles naturally fit on each row in addition to how many rows fit in the container.

I'm not suggesting the requirement is simple to implement by any means, but as an example this Angular virtualizing plugin supports this requirement and I believe WPF's VirtualizingWrapPanel does more or less the same job, so it's definitely not outside the normal range of features for a virtualizing panel. I have actually switched my project now from Blazor to Angular, principally because I couldn't find a suitable implementation of this exact requirement for Blazor and didn't fancy writing one myself.

The use case is a "thumbnail gallery", or any scenario in which "tiles" of known width and height are arranged in a responsive grid - it isn't probably as common as the full row scrolling list use case, but I'd argue it isn't exactly a fringe requirement either.

[SteveSandersonMS]

Thanks for clarifying, @wwarby. That is quite different from the arbitrary 2D scrolling behavior I thought you meant before. But it is complicated in its own ways, as we'd have to bake in a mechanism for computing how many items would be on each row, and dealing with changes to that.

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.

[msynk]

I think it's a useful feature as other frameworks have it working seamlessly like the list components in the Microsoft Fluent UI library:

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

[wwarby]

This is still the blocking issue for me that makes switching to Blazor impossible. My current setup is an Angular app running in Chromely in a native window, which is just cumbersome to maintain. I'd love to replace it with Blazor on MAUI but for my use case performance is unacceptable without wrapping virtualisation panels.