VirtualGrid: Virtualized Grid Panel for Large Item Collections

Razor Usage

<VirtualGrid Items=@Items ItemSize=@(120)>
    <Item Context="item">
        @if (item is Package entry)
        {
            <SpawnButton Icon="@entry.Thumb" Action="@(() => Spawn(entry))"></SpawnButton>
        }
    </Item>
</VirtualGrid>

@code
{
    public Package[] Items { get; set; }
}

Properties

• Items — any IEnumerable<T> containing your data
• ItemSize — Vector2 defining cell aspect ratio. Cells scale up to fit the container flush while maintaining this ratio
• <Item Context="item"> — defines cell contents. Each cell gets the CSS class "cell"

Styling Requirements

The VirtualGrid element must have an explicit size (typically width: 100%; height: 100%). Use gap styles on the VirtualGrid element for spacing between cells.

Gotchas

• All items must be the same size (defined by ItemSize)
• The grid won't render without explicit width/height in styles
• Items are created/destroyed as you scroll — don't store state in cell panels that needs to persist across scrolling