Barcodes & QR Codes

Shiny.Maui.Controls.Barcodes and Shiny.Blazor.Controls.Barcodes are separate add-on packages that render 1D and 2D barcodes — including QR codes — using ZXing.Net. The PNG path uses a pure-managed, AOT-safe encoder built into the package: no SkiaSharp, no System.Drawing, so the same code ships clean on iOS, Android, Mac Catalyst, Windows, and Blazor WebAssembly.

On MAUI, BarcodeView and QRCodeView are simple ContentView subclasses backed by an Image. On Blazor, the same two components render either inline <svg> (default, crisp at any size) or a PNG data: URI. For headless rendering — PDF exports, email attachments, label printing — the static BarcodeRenderer returns raw PNG bytes, SVG markup, or a data: URI directly.

Supported symbologies: QR Code, Aztec, Data Matrix, PDF417, Code 128, Code 39, Code 93, Codabar, EAN-8, EAN-13, UPC-A, UPC-E, ITF.

• 
• 

Frameworks

.NET MAUI

Blazor

MAUIBlazor

• NuGet Packages
• Project File
• MauiProgram.cs

Shiny.Maui.Controls.Barcodes

Features

• 13 symbologies — QRCode, Aztec, DataMatrix, Pdf417, Code128, Code39, Code93, Codabar, Ean8, Ean13, UpcA, UpcE, Itf.
• QRCodeView shortcut — Locks Format = QRCode, exposes a single square Size property, and adds ErrorCorrection (Low / Medium / Quartile / High).
• Pure-managed PNG encoder — Custom zlib + CRC32 + Adler32 implementation, no SkiaSharp / System.Drawing dependency.
• Inline SVG on Blazor — Single-path output with shape-rendering="crispEdges", scales infinitely without aliasing, stays tiny in DOM size.
• Configurable foreground / background colors — Hex on the shared options, MAUI Color on the MAUI views, CSS strings on Blazor.
• Headless API — BarcodeRenderer.RenderPng / RenderSvg / RenderDataUri for use from view models, services, PDF builders, etc.
• AOT-safe — Pure managed code, no dynamic codegen, no reflection-only types.

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install plugins:

claude plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

claude plugin install shiny-maui@shiny

Shell, Contact Store

claude plugin install controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

claude plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

claude plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

claude plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

claude plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install plugins:

copilot plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

copilot plugin install shiny-maui@shiny

Shell, Contact Store

copilot plugin install controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

copilot plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

copilot plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

copilot plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

copilot plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

View Skills Repository

Installation

.NET MAUI

dotnet add package Shiny.Maui.Controls.Barcodes

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

No DI registration is required — the views are plain ContentViews.

Blazor

dotnet add package Shiny.Blazor.Controls.Barcodes

@using Shiny.Blazor.Controls.Barcodes
@using Shiny.Controls.Barcodes

Quick Start

.NET MAUI

<!-- 1D / 2D — pick any supported Format -->
<bc:BarcodeView Value="5901234123457"
                Format="Ean13"
                PixelWidth="400"
                PixelHeight="150"
                MarginPixels="10"
                ForegroundColor="Black"
                BarcodeBackgroundColor="White" />

<!-- QR code shortcut -->
<bc:QRCodeView Value="https://shinylib.net"
               Size="300"
               ErrorCorrection="High" />

Blazor

<!-- SVG output (default) — crisp at any CSS size -->
<BarcodeView Value="5901234123457"
             Format="BarcodeFormat.Ean13"
             PixelWidth="400"
             PixelHeight="150" />

<!-- PNG output when you need a raw <img> -->
<BarcodeView Value="5901234123457"
             Format="BarcodeFormat.Ean13"
             ImageFormat="BarcodeImageFormat.Png"
             CssWidth="100%" CssHeight="80px" />

<!-- QR shortcut -->
<QRCodeView Value="https://shinylib.net"
            Size="300"
            QRErrorCorrection="QRErrorCorrection.High" />

CssWidth and CssHeight override the host element’s CSS size — set them to "100%", vh units, etc. while keeping PixelWidth/PixelHeight at the desired encoder resolution.

Render directly from code

For PDF generation, file export, email attachments, or anywhere you need raw bytes:

using Shiny.Controls.Barcodes;

var opts = new BarcodeRenderOptions
{
    PixelWidth = 600,
    PixelHeight = 200,
    Margin = 10,
    ForegroundColor = "#000000",
    BackgroundColor = "#FFFFFF",
    QRErrorCorrection = QRErrorCorrection.High // QR only — ignored for other formats
};

byte[] png     = BarcodeRenderer.RenderPng("Hello", BarcodeFormat.QRCode, opts);
string svg     = BarcodeRenderer.RenderSvg("Hello", BarcodeFormat.QRCode, opts);
string dataUri = BarcodeRenderer.RenderDataUri("Hello", BarcodeFormat.QRCode, BarcodeImageFormat.Png, opts);

All three calls are static, stateless, and AOT-safe.

Properties

BarcodeView (MAUI)

Property	Type	Default	Description
Value	string	""	Content to encode. Empty clears the image
Format	BarcodeFormat	Code128	Symbology (see list above)
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 (MAUI)

Inherits everything from BarcodeView. Forces Format = QRCode and adds:

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

BarcodeView (Blazor)

Parameter	Type	Default	Description
Value	string?	null	Content to encode
Format	BarcodeFormat	Code128	Symbology
ImageFormat	BarcodeImageFormat	Svg	Svg (inline <svg>) or Png (<img> with data: URI)
PixelWidth / PixelHeight	int	400 / 150	Encoder pixel size and default CSS size when no CssWidth/CssHeight is set
MarginPixels	int	10	Quiet-zone padding
ForegroundColor / BackgroundColor	string	”#000000” / “#FFFFFF”	CSS hex colors
CssWidth / CssHeight	string?	null	CSS sizing overrides for the host ("100%", "4cm", etc.)
AltText	string?	null	alt attribute when rendered as PNG <img>
QRErrorCorrection	QRErrorCorrection	Medium	Only honored when Format = QRCode

QRCodeView (Blazor)

Inherits everything from BarcodeView. Forces Format = QRCode and adds:

Parameter	Type	Default	Description
Size	int	300	Square edge length — overwrites PixelWidth/PixelHeight

BarcodeRenderOptions (shared)

Property	Type	Default	Description
PixelWidth / PixelHeight	int	250 / 250	Output bitmap size
Margin	int	10	Quiet-zone padding in pixels
ForegroundColor	string	”#000000”	Hex (#RGB, #RRGGBB, or #AARRGGBB — alpha is stripped)
BackgroundColor	string	”#FFFFFF”	Hex
QRErrorCorrection	QRErrorCorrection	Medium	QR-only, ignored for other formats

Symbology Quick Reference

Format	Use For	Sample Payload
QRCode	URLs, vCards, Wi-Fi configs, generic text	https://shinylib.net
Aztec	Transport tickets, boarding passes	M1JOHNDOE/EXAMPLE...
DataMatrix	Tiny labels, electronics, healthcare	SKU-12345
Pdf417	Driver’s licenses, shipping labels	larger structured data
Code128	General-purpose 1D barcodes, shipping, IDs	ABC-12345-XYZ
Code39	Legacy industry / military / automotive	HELLO 42 (uppercase + a few symbols)
Code93	Compact alternative to Code 39	HELLO123
Codabar	Libraries, blood banks, FedEx airbills	A123456789B
Ean8 / Ean13	Retail products (Europe / global)	5901234123457 (must be a valid GTIN)
UpcA / UpcE	Retail products (North America)	036000291452
Itf	Carton labels, ITF-14 SCC-14	even-length numeric string

1D symbologies have strict input rules (length, alphabet, check digits). Invalid input does not throw — the view clears the image silently. Validate the payload upstream if you need explicit failure feedback.

Behavior

• MAUI BarcodeView is a ContentView containing a single Image set to Aspect="AspectFit". Size the control with WidthRequest/HeightRequest or via layout; the encoded PNG renders at PixelWidth × PixelHeight regardless of the on-screen size.
• MAUI QRCodeView subclasses BarcodeView, forces Format = QRCode, and treats Size as a square edge that drives both PixelWidth and PixelHeight.
• Blazor SVG output uses a single horizontal-run <path> (with shape-rendering="crispEdges"), so it scales infinitely without aliasing and stays tiny in DOM size. Prefer SVG over PNG on Blazor unless you specifically need an <img> element.
• Setting Value to null or "" clears the image. The MAUI view also swallows encoder exceptions (e.g. EAN-13 with non-numeric content) and clears the image rather than throwing.
• The Blazor component re-encodes inside OnParametersSet whenever any parameter changes — keep Value stable across renders to avoid wasted encoding work.

Tips

• Use QRCodeView for QR codes even though BarcodeView would work with Format="QRCode". The specialized view exposes ErrorCorrection and a square Size property tuned for QR codes.
• Use ErrorCorrection.High for print — printed labels, stickers, and anything that might be partially obscured benefits from ~30% redundancy. Use Low only when you need maximum data capacity in a tiny code.
• Encode at print resolution, render small — set PixelWidth/PixelHeight to roughly the rendered size (or 2×) when using PNG output. SVG output ignores the resolution entirely.
• Validate retail payloads — EAN, UPC, and ITF require valid lengths and (for EAN/UPC) a correct check digit. Validate the value before binding if you need a user-facing error.
• Use the headless BarcodeRenderer for PDFs, emails, and exports — there’s no need to spin up a view if you only want bytes or SVG markup.
• Throttle hot bindings — every change to Value triggers a re-encode. Throttle or debounce upstream when the value changes more than a few times per second.

When to Use What

• Show a URL / pairing code / Wi-Fi join → QRCodeView with default Medium error correction.
• Print a sticker that may get scuffed → QRCodeView with ErrorCorrection="High".
• Render a retail product barcode → BarcodeView with Format="Ean13" (or UpcA in North America). Make sure the payload is a valid GTIN.
• Generate a PDF or email attachment with a barcode → BarcodeRenderer.RenderPng(...) from your service layer; no view required.
• Embed a barcode in a Blazor HTML email → BarcodeRenderer.RenderDataUri(..., BarcodeImageFormat.Png, ...) and drop the result in an <img src="...">.
• Vector output for a print template → BarcodeRenderer.RenderSvg(...) and embed it in your XAML or HTML directly.