Skip to main content

BnPicker

Namespace: BlazorNative.Components

A drop-down / wheel picker over a list of strings. Renders as a native Spinner on Android and a UIPickerView on iOS.

public class BnPicker : BnLayoutItem, Microsoft.AspNetCore.Components.IComponent, Microsoft.AspNetCore.Components.IHandleEvent, Microsoft.AspNetCore.Components.IHandleAfterRender

Inheritance Object → ComponentBase → BnLayoutItem → BnPicker
Implements IComponent, IHandleEvent, IHandleAfterRender

Remarks:

Unlike BnInput — where the text lives in your code and the widget echoes it — a native picker owns its selection UI, so the whole item list is handed to the platform and the selection comes back as an index.

The selection is always valid, and the picker will correct you. With no items the index is -1. With items, it is clamped into range: a negative becomes 0, and an index past the end becomes the last item — because a native picker always shows something, so "nothing selected" is not a state it can represent. When clamping moves the value, SelectedIndexChanged fires with the clamped index, so your bound state re-syncs to what is actually on screen instead of the two quietly disagreeing.

<BnPicker Items="_cities" @bind-SelectedIndex="_city" />

@code {
    private readonly string[] _cities = ["Amsterdam", "Rotterdam", "Utrecht"];
    private int _city;
}

Properties​

Items​

The strings to show. Null or empty means an empty picker. The text is opaque — commas, quotes and non-ASCII are all fine.

public IReadOnlyList<string>? Items { get; set; }

Property Value​

IReadOnlyList<String>

SelectedIndex​

The selected index. It is always clamped to something valid before it reaches the platform: -1 when BnPicker.Items is empty, otherwise into [0, Count-1]. When the clamp moves it, BnPicker.SelectedIndexChanged fires with the clamped value so your bound state matches what is on screen.

public int SelectedIndex { get; set; }

Property Value​

Int32

SelectedIndexChanged​

Raised with the newly selected index when the user picks — the write-back half of the @bind-SelectedIndex pair. It is also raised with the clamped index when a change to BnPicker.Items forces one, so your bound state never drifts from what the picker shows.

public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value​

EventCallback<Int32>

Enabled​

Set false to show the platform's disabled picker and stop it responding. Default true.

public bool Enabled { get; set; }

Property Value​

Boolean

BackgroundColor​

Fill colour behind the component. Null leaves it transparent.

public string? BackgroundColor { get; set; }

Property Value​

String

Margin​

Space outside the component, between it and its siblings. Null = none.

public BnAutoLength? Margin { get; set; }

Property Value​

BnAutoLength?

Remarks:

auto is legal here and absorbs free space, which re-centres the node.

AlignSelf​

Cross-axis alignment for this item alone, overriding the parent's. Null = inherit.

public FlexAlign? AlignSelf { get; set; }

Property Value​

FlexAlign?

Grow​

Share of leftover space this item takes (unitless ratio). Null = Yoga's default (0).

public float? Grow { get; set; }

Property Value​

Single?

Shrink​

Share of overflow this item gives up (unitless ratio). Null = Yoga's default (1).

public float? Shrink { get; set; }

Property Value​

Single?

Basis​

Starting main-axis size before grow/shrink. Null = auto.

public BnAutoLength? Basis { get; set; }

Property Value​

BnAutoLength?

Width​

Box width. Null = auto.

public BnAutoLength? Width { get; set; }

Property Value​

BnAutoLength?

Height​

Box height. Null = auto.

public BnAutoLength? Height { get; set; }

Property Value​

BnAutoLength?

MinWidth​

Lower bound on width. Null = unset.

public BnLength? MinWidth { get; set; }

Property Value​

BnLength?

MaxWidth​

Upper bound on width. Null = unset.

public BnLength? MaxWidth { get; set; }

Property Value​

BnLength?

MinHeight​

Lower bound on height. Null = unset.

public BnLength? MinHeight { get; set; }

Property Value​

BnLength?

MaxHeight​

Upper bound on height. Null = unset.

public BnLength? MaxHeight { get; set; }

Property Value​

BnLength?

Position​

Positioning scheme. Null = Yoga's default (relative).

public FlexPosition? Position { get; set; }

Property Value​

FlexPosition?

Top​

Top inset. Null = unset.

public BnLength? Top { get; set; }

Property Value​

BnLength?

Right inset. Null = unset.

public BnLength? Right { get; set; }

Property Value​

BnLength?

Bottom​

Bottom inset. Null = unset.

public BnLength? Bottom { get; set; }

Property Value​

BnLength?

Left​

Left inset. Null = unset.

public BnLength? Left { get; set; }

Property Value​

BnLength?

Constructors​

BnPicker()​

public BnPicker()