Skip to main content

BnView

Namespace: BlazorNative.Components

A container: a box that holds other components and arranges them with flexbox. Renders as a plain native view — a FrameLayout on Android, a UIView on iOS — positioned by Yoga.

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

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

Remarks:

Every parameter is optional, and an unset one is never sent to the platform. A BnView with no parameters is an unstyled container and the layout engine's own defaults apply: children stack vertically, packed toward the top and stretched across the width.

Lengths. Every length-valued parameter takes a bare number in density-independent units — "16" means 16dp on Android and 16pt on iOS — or a percentage such as "50%", or "auto" where the layout engine allows it. There is no unit suffix: "16dp", "16px" and "16sp" are not part of the grammar. BnView.Grow and BnView.Shrink are the exceptions — they are unitless ratios rather than lengths.

The parameters fall into three groups: how this view arranges its children (BnView.Direction, BnView.Justify, BnView.Align, BnView.Wrap, BnView.Gap); how this view behaves as an item inside its own parent (BnView.AlignSelf, BnView.Grow, BnView.Shrink, BnView.Basis); and its own box (BnView.Width, BnView.Height, the min/max pair, and the BnView.Position insets).

A header row pinned to the top of a filling column:

<BnColumn Grow="1" Padding="16" Gap="8">
    <BnRow Justify="FlexJustify.SpaceBetween">
        <BnText Text="Inbox" />
        <BnText Text="3" />
    </BnRow>
    <BnView Grow="1" BackgroundColor="#EEEEEE" />
</BnColumn>

Properties​

BackgroundColor​

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

public string? BackgroundColor { get; set; }

Property Value​

String

Padding​

Inside spacing, in density-independent units — 16 is 16dp on Android and 16pt on iOS. Children are placed inside the padding box, so padding shrinks the space they get rather than moving this view. Null = none. Unlike the other lengths this one is a number, not a string: percentage and "auto" paddings are not expressible.

public float? Padding { get; set; }

Property Value​

Single?

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

Direction​

Main axis (flexDirection). Null = Yoga's default (column).

public FlexDirection? Direction { get; set; }

Property Value​

FlexDirection?

Justify​

Main-axis distribution (justifyContent). Null = flex-start.

public FlexJustify? Justify { get; set; }

Property Value​

FlexJustify?

Align​

Cross-axis alignment of the children (alignItems). Null = stretch.

public FlexAlign? Align { get; set; }

Property Value​

FlexAlign?

Wrap​

Line wrapping (flexWrap). Null = nowrap.

public FlexWrap? Wrap { get; set; }

Property Value​

FlexWrap?

Gap​

Gap between children, e.g. "8" (gap). Null = 0.

public string? Gap { 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, e.g. "100" or "50%". Null = auto.

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 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

ChildContent​

Nested content rendered inside this view.

public RenderFragment? ChildContent { get; set; }

Property Value​

RenderFragment

Constructors​

BnView()​

public BnView()