Barcodes & QR Codes | Blazor Usage

The Blazor components render either an inline <svg> (the default) or a PNG data: URI inside an <img>. Both paths use the same pure-managed encoder as MAUI, so they work identically on Blazor WebAssembly with no JS interop.

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

SVG vs PNG output

ImageFormat selects how the barcode is emitted:

ImageFormat	Output	Best for
Svg (default)	Inline <svg> with a single <path> and shape-rendering="crispEdges"	Almost everything — scales infinitely without aliasing, stays tiny in the DOM, no base64 bloat
Png	<img> with a data:image/png;base64,… URI	When you specifically need a real <img> element (e.g. to drag/save the image, or a downstream tool that expects a bitmap)

Prefer SVG unless you have a concrete reason to need a bitmap.

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

<!-- PNG when you need a raw <img> -->
<BarcodeView Value="5901234123457"
             Format="BarcodeFormat.Ean13"
             ImageFormat="BarcodeImageFormat.Png"
             AltText="Product barcode" />

BarcodeView parameters

Parameter	Type	Default	Description
Value	string?	null	Content to encode. null/"" renders nothing
Format	BarcodeFormat	Code128	Symbology — see Symbologies
ImageFormat	BarcodeImageFormat	Svg	Svg (inline <svg>) or Png (<img> with data URI)
PixelWidth	int	400	Encoder pixel width; also the default CSS width when CssWidth is unset
PixelHeight	int	150	Encoder pixel height; also the default CSS height when CssHeight is unset
MarginPixels	int	10	Quiet-zone padding
ForegroundColor	string	"#000000"	CSS hex color
BackgroundColor	string	"#FFFFFF"	CSS hex color
CssWidth	string?	null	CSS width override for the host ("100%", "4cm", …)
CssHeight	string?	null	CSS height override for the host
AltText	string?	null	alt attribute, used only when rendered as a PNG <img>
QRErrorCorrection	QRErrorCorrection	Medium	Honored only when Format = QRCode

QRCodeView

A BarcodeView subclass locked to Format = QRCode that adds a square Size parameter (it overwrites both PixelWidth and PixelHeight). It inherits everything else from BarcodeView, including QRErrorCorrection.

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

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

CSS sizing

PixelWidth/PixelHeight set the encoder resolution; CssWidth/CssHeight set the rendered size of the host element. When the CSS overrides are unset, the host falls back to {PixelWidth}px / {PixelHeight}px.

Because SVG output is vector, you can encode at a modest resolution and still render it at any size:

<!-- Fill the container; SVG stays crisp -->
<BarcodeView Value="@order.Tracking"
             Format="BarcodeFormat.Code128"
             CssWidth="100%"
             CssHeight="80px" />

The host is an inline-block <div> (SVG) or <img> (PNG) with class shiny-barcode, so you can target it from your stylesheet too.

Re-render behavior

The component re-encodes inside OnParametersSet whenever any parameter changes. That means:

• Keep Value (and the other parameters) stable across renders — passing a freshly-computed string on every render forces a re-encode each cycle.
• Like MAUI, invalid input never throws: a failed encode just clears the output (empty SVG / empty src). Validate upstream if you need explicit error feedback.

See also

• .NET MAUI Usage — the native equivalents
• Headless Rendering — generate SVG/PNG/data URIs without a component (handy for HTML emails)
• Symbologies — per-format rules and error correction