Skip to main content

BnList<TItem>

Namespace: BlazorNative.Components

A virtualized list: it renders only the rows near the viewport, so a list of ten thousand items costs about as much as a list of twenty.

public class BnList<TItem> : Microsoft.AspNetCore.Components.ComponentBase, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender

Type Parameters​

TItem
The item type. Rows are keyed by the item itself.

Inheritance Object → ComponentBase → BnList<TItem>
Implements IComponent, IHandleEvent, IHandleAfterRender
Attributes NullableContextAttribute, NullableAttribute

Remarks:

It is a BnScroll with the off-screen rows replaced by two spacers, so the scrollbar is the size it would be if every row existed. ItemHeight and Height are required and must be positive: the window arithmetic is exact, which is what makes the frames predictable, and it needs both numbers up front. Rows are a fixed height — a variable-height list is a different component and this is not it.

Items must be distinct. Rows are keyed by the item, which is what lets a row's state — an open editor, the text in a box, the focus — travel with the item rather than with its position as the list scrolls. Two equal items in one window will throw.

A row that scrolls out is destroyed, and its row-local state goes with it. Keep state that must survive in your own model, not in the row. Overscan (default 4) renders a few extra rows beyond each edge to absorb the latency of a fast fling.

<BnList Items="_rows" ItemHeight="44" Height="400">
    <RowTemplate>
        <BnText Text="@context.Name" />
    </RowTemplate>
</BnList>

Properties​

Items​

The items to show. Keyed by the item, so they must be distinct — duplicates throw. Never null; defaults to empty.

public IReadOnlyList<TItem> Items { get; set; }

Property Value​

IReadOnlyList<TItem>

ItemHeight​

Row height in dp or pt — required, and must be positive. Every row is exactly this tall; variable row heights are not supported.

public float ItemHeight { get; set; }

Property Value​

Single

Height​

Viewport height in dp or pt — required, and must be positive. It has to be a number rather than a flex size: the list computes which rows to render from it, and it cannot do that for a viewport whose height only the layout engine knows.

public float Height { get; set; }

Property Value​

Single

Overscan​

How many extra rows to render beyond each edge of the viewport. They absorb the latency of a fast fling. Default 4.

public int Overscan { get; set; }

Property Value​

Int32

Width​

Viewport width, in the same grammar as BnView.Width. Null = auto.

public string? Width { get; set; }

Property Value​

String

RowTemplate​

The content of one row. The list owns the row box itself — a container exactly BnList<TItem>.ItemHeight tall — and this fragment fills it. The item is available as @context.

public RenderFragment<TItem>? RowTemplate { get; set; }

Property Value​

RenderFragment<TItem>

Constructors​

BnList()​

public BnList()