Client v5: BLE, BLE Hosting, HTTP, Jobs - Linux, MacOS, & Blazor Support! Full AOT, RX on BLE only & MANY other features! Power up!

Barcodes & QR Codes | .NET MAUI Usage

On MAUI, both controls are simple ContentView subclasses backed by a single Image (Aspect="AspectFit"). They encode to a PNG in-memory and assign it to the image — there’s no handler, no native view, and no DI registration to wire up.

xmlns:bc="http://shiny.net/maui/barcodes"

BarcodeView

The general-purpose view — pick any symbology via Format.

<bc:BarcodeView Value="ABC-12345-XYZ"
                Format="Code128"
                PixelWidth="400"
                PixelHeight="150"
                MarginPixels="10"
                ForegroundColor="Black"
                BarcodeBackgroundColor="White" />

Property	Type	Default	Description
`Value`	`string`	`""`	Content to encode. Setting it to `null`/`""` clears the image
`Format`	`BarcodeFormat`	`Code128`	Symbology — see Symbologies
`PixelWidth`	`int`	`400`	Output bitmap width in pixels
`PixelHeight`	`int`	`150`	Output bitmap height in pixels
`MarginPixels`	`int`	`10`	Quiet-zone padding around the symbol
`ForegroundColor`	`Color`	`Black`	Bar / module color
`BarcodeBackgroundColor`	`Color`	`White`	Background fill

QRCodeView

A BarcodeView subclass locked to Format = QRCode. Because QR codes are square, it collapses PixelWidth/PixelHeight into a single Size, and surfaces the QR-only ErrorCorrection level.

<bc:QRCodeView Value="https://shinylib.net"
               Size="300"
               ErrorCorrection="High"
               ForegroundColor="#1B1B2F"
               BarcodeBackgroundColor="White" />

Property	Type	Default	Description
`Size`	`int`	`300`	Square output edge in px — sets both `PixelWidth` and `PixelHeight`
`ErrorCorrection`	`QRErrorCorrection`	`Medium`	`Low` / `Medium` / `Quartile` / `High` — higher tolerates more damage at the cost of capacity

QRCodeView inherits every BarcodeView property (Value, colors, MarginPixels), so you can still theme it. See error correction trade-offs.

Sizing: pixels vs. layout

There are two independent size concepts and it’s worth keeping them straight:

PixelWidth/PixelHeight (Size for QR) — the resolution of the encoded PNG. This is the source quality.
On-screen size — the ContentView’s layout, controlled the usual way (WidthRequest/HeightRequest, grid/stack layout, etc.).

Because the inner Image uses AspectFit, the encoded bitmap scales to fit the laid-out control without distortion. Encode at (roughly) the size you’ll display — or 2× for crisp results on high-DPI screens — then let layout do the rest:

<bc:QRCodeView Value="{Binding JoinUrl}"
               Size="600"
               WidthRequest="180"
               HeightRequest="180"
               HorizontalOptions="Center" />

Data binding

Every property is a BindableProperty, so bind freely. Each change to Value (or any render property) triggers a re-encode:

<bc:BarcodeView Value="{Binding Sku}"
                Format="{Binding SelectedFormat}"
                ForegroundColor="{AppThemeBinding Light=Black, Dark=White}"
                BarcodeBackgroundColor="{AppThemeBinding Light=White, Dark=#1B1B2F}" />

Want to react to dark/light mode automatically? AppThemeBinding on the two color properties is the simplest path, as above.

Behavior & gotchas

Invalid input never throws. Rebuild() wraps the encode in a try/catch — bad input (e.g. an EAN-13 with letters, or a payload too long for the symbology) silently clears the image rather than crashing. If you need user-facing failure feedback, validate the payload upstream.
Empty value clears the image. Binding Value to null/"" is the intended “no barcode” state.
Re-encode on every change. Each property change re-runs the encoder on the calling thread. For fast-changing values (e.g. a live counter), debounce/throttle upstream so you’re not encoding many times per second.
PNG only on MAUI. The MAUI views always render PNG. If you need vector output (for a print template, say), call BarcodeRenderer.RenderSvg(...) directly.