BnScroll

Namespace: BlazorNative.Components

A scrolling viewport. Renders as a native ScrollView on Android and a UIScrollView on iOS. It is a flex item (BnView's item parameters: BnScroll.Grow, BnScroll.Shrink, BnScroll.Basis, BnScroll.AlignSelf, the box, BnScroll.Margin, BnScroll.Position) that scrolls its content.

public sealed class BnScroll : Microsoft.AspNetCore.Components.ComponentBase, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender

Inheritance Object → ComponentBase → BnScroll
Implements IComponent, IHandleEvent, IHandleAfterRender
Attributes NullableContextAttribute, NullableAttribute

Remarks:

Not a flex container. There is no Direction, Justify, Align, Wrap, Gap or Padding parameter: those would style the viewport itself rather than the content inside it — they would space nothing, or push the content to a negative offset a scroll view can never scroll back to. To lay out the content, put a BnColumn inside: <BnScroll Height="200"><BnColumn Gap="8">…</BnColumn></BnScroll>. Both platforms ignore those style names on a scroll node, so there is no way around it.

Vertical only. Horizontal scrolling is a different widget class on Android, and is not supported rather than half-supported.

Give it a definite height. An auto-height BnScroll takes its height from its content, so the viewport equals the content and nothing scrolls; the shells log one warning when that happens. Use an explicit BnScroll.Height, or — inside a parent with a definite height — Grow="1" Basis="0" (CSS's flex: 1).

alone is not enough, and it is the mistake everybody makes here. With BnScroll.Basis left at auto, the scroll node's flex basis is its content's height, so the free space against a shorter parent is negative — and BnScroll.Grow only distributes positive free space. The negative goes to the shrink pass, and Yoga's BnScroll.Shrink default is 0, so nothing shrinks: the viewport keeps its content's full height, overflows its parent, and does not scroll. Basis="0" (or Shrink="1") is what fixes it — which is exactly why CSS's flex: 1 shorthand sets the basis to 0.

Your children are re-parented into a content node inside the viewport, whose height is the total content height — that is what the platform scrolls.

Properties

BackgroundColor

Background color as a hex string, e.g. "#FFEEAA". Null leaves the view transparent.

public string? BackgroundColor { get; set; }

Property Value

String

Margin

Outside spacing, e.g. "8" — space between this view's box and its siblings. Null = none.

public string? Margin { get; set; }

Property Value

String

AlignSelf

Cross-axis override for this item (alignSelf). Null = auto (inherit the parent's BnView.Align).

public FlexAlign? AlignSelf { get; set; }

Property Value

FlexAlign?

Grow

Share of the free main-axis space this item absorbs (flexGrow) — a UNITLESS number, not a length. Null = 0.

public float? Grow { get; set; }

Property Value

Single?

Shrink

Share of the main-axis overflow this item gives back (flexShrink) — a UNITLESS number. Null = Yoga's default.

public float? Shrink { get; set; }

Property Value

Single?

Basis

Main-axis base size (flexBasis): "auto" | "50%" | "120". Null = auto.

public string? Basis { get; set; }

Property Value

String

Width

Width, e.g. "300" or "50%". Null = auto.

public string? Width { get; set; }

Property Value

String

Height

Height of the viewport, e.g. "200". Null = auto — and an auto-height scroll takes its height from its content, so nothing scrolls. Either this, or BnScroll.GrowplusBnScroll.Basis="0" inside a bounded parent — BnScroll.Grow on its own does NOT bound a viewport whose content is taller than its parent.

public string? Height { get; set; }

Property Value

String

MinWidth

Minimum width. Null = unset.

public string? MinWidth { get; set; }

Property Value

String

MaxWidth

Maximum width. Null = unset.

public string? MaxWidth { get; set; }

Property Value

String

MinHeight

Minimum height. Null = unset.

public string? MinHeight { get; set; }

Property Value

String

MaxHeight

Maximum height. Null = unset.

public string? MaxHeight { get; set; }

Property Value

String

Position

Positioning mode (position). Null = relative (in flow).

public FlexPosition? Position { get; set; }

Property Value

FlexPosition?

Top

Top inset. Null = unset.

public string? Top { get; set; }

Property Value

String

Right

Right inset. Null = unset.

public string? Right { get; set; }

Property Value

String

Bottom

Bottom inset. Null = unset.

public string? Bottom { get; set; }

Property Value

String

Left

Left inset. Null = unset.

public string? Left { get; set; }

Property Value

String

OnScroll

Raised with the vertical content offset, in dp on Android and pt on iOS, as the viewport scrolls. Optional: nothing is attached to the native control unless you supply a handler.

Events are conflated, not queued — at most one per rendered frame, latest offset wins. A slow handler therefore sees fewer, fresher events rather than a growing backlog, so you cannot use this to count scroll ticks.

The offset arrives raw. iOS rubber-banding can report a negative offset, or one past the end of the scroll range. Clamp it if your maths depends on it being inside the content.

public EventCallback<BnScrollEventArgs> OnScroll { get; set; }

Property Value

EventCallback<BnScrollEventArgs>

ChildContent

The content to scroll. Wrap it in a BnColumn to give it a gap, a padding or an alignment — this component will not do that for you.

public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Constructors

BnScroll()

public BnScroll()