Class RadzenQRCode

A QR code generator component that creates scannable QR codes from text, URLs, or other data as SVG graphics. RadzenQRCode supports extensive customization including colors, shapes, error correction, and embedded logos. Encodes data in a two-dimensional barcode format scannable by smartphones and QR code readers. Generates QR codes entirely client-side as SVG, with no external dependencies. Features data encoding (text, URLs, contact info, WiFi credentials, or any string data), error correction levels (Low, Medium, Quartile, High) for different damage resistance, customization of colors for modules (dots) and background with custom shapes (Square, Rounded, Circle), optional logo/image embedding in the center of the QR code, eye styling to customize the appearance of the three corner finder patterns, and responsive size (percentage or pixel-based) for responsive layouts. Higher error correction levels allow the QR code to remain scannable even when partially damaged or obscured (e.g., by a logo). Use Quartile or High error correction when embedding logos.

Inheritance

object

ComponentBase

RadzenComponent

RadzenQRCode

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenQRCode : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic QR code for URL:

<RadzenQRCode Value="https://radzen.com" Size="200px" />

Customized QR code with logo:

<RadzenQRCode Value="https://example.com" Foreground="#4169E1" Background="#F0F0F0"
              Image="logo.png" ImageSizePercent="25" Ecc="RadzenQREcc.High"
              ModuleShape="QRCodeModuleShape.Rounded" Size="300px" />

Constructors

RadzenQRCode()

A QR code generator component that creates scannable QR codes from text, URLs, or other data as SVG graphics. RadzenQRCode supports extensive customization including colors, shapes, error correction, and embedded logos. Encodes data in a two-dimensional barcode format scannable by smartphones and QR code readers. Generates QR codes entirely client-side as SVG, with no external dependencies. Features data encoding (text, URLs, contact info, WiFi credentials, or any string data), error correction levels (Low, Medium, Quartile, High) for different damage resistance, customization of colors for modules (dots) and background with custom shapes (Square, Rounded, Circle), optional logo/image embedding in the center of the QR code, eye styling to customize the appearance of the three corner finder patterns, and responsive size (percentage or pixel-based) for responsive layouts. Higher error correction levels allow the QR code to remain scannable even when partially damaged or obscured (e.g., by a logo). Use Quartile or High error correction when embedding logos.

Declaration

public RadzenQRCode()

Examples

Basic QR code for URL:

<RadzenQRCode Value="https://radzen.com" Size="200px" />

Customized QR code with logo:

<RadzenQRCode Value="https://example.com" Foreground="#4169E1" Background="#F0F0F0"
              Image="logo.png" ImageSizePercent="25" Ecc="RadzenQREcc.High"
              ModuleShape="QRCodeModuleShape.Rounded" Size="300px" />

Properties

Background

Gets or sets the background color of the QR code. Should contrast well with the foreground color for reliable scanning.

Declaration

[Parameter]
public string Background { get; set; }

Property Value

Type	Description
string	The background color. Default is "#FFF" (white).

Ecc

Gets or sets the error correction level determining how much damage the QR code can sustain while remaining scannable. Higher levels add more redundancy but reduce data capacity. Use High or Quartile when embedding logos.

Declaration

[Parameter]
public RadzenQREcc Ecc { get; set; }

Property Value

Type	Description
RadzenQREcc	The error correction level. Default is Quartile.

EyeColor

Optional color for eyes; if empty, falls back to Foreground.

Declaration

[Parameter]
public string EyeColor { get; set; }

Property Value

Type	Description
string

EyeColorBottomLeft

Optional color for bottom right eye; if empty, falls back to EyeColor.

Declaration

[Parameter]
public string EyeColorBottomLeft { get; set; }

Property Value

Type	Description
string

EyeColorTopLeft

Optional color for top left eye; if empty, falls back to EyeColor.

Declaration

[Parameter]
public string EyeColorTopLeft { get; set; }

Property Value

Type	Description
string

EyeColorTopRight

Optional color for top right eye; if empty, falls back to EyeColor.

Declaration

[Parameter]
public string EyeColorTopRight { get; set; }

Property Value

Type	Description
string

EyeShape

Shape for finder eyes (the 3 corner boxes).

Declaration

[Parameter]
public QRCodeEyeShape EyeShape { get; set; }

Property Value

Type	Description
QRCodeEyeShape

EyeShapeBottomLeft

Shape for top bottom finder eye.

Declaration

[Parameter]
public QRCodeEyeShape? EyeShapeBottomLeft { get; set; }

Property Value

Type	Description
QRCodeEyeShape?

EyeShapeTopLeft

Shape for top left finder eye.

Declaration

[Parameter]
public QRCodeEyeShape? EyeShapeTopLeft { get; set; }

Property Value

Type	Description
QRCodeEyeShape?

EyeShapeTopRight

Shape for top right finder eye.

Declaration

[Parameter]
public QRCodeEyeShape? EyeShapeTopRight { get; set; }

Property Value

Type	Description
QRCodeEyeShape?

Foreground

Gets or sets the color of the QR code modules (the dark squares/dots). Supports any valid CSS color. Use high contrast with background for best scanability.

Declaration

[Parameter]
public string Foreground { get; set; }

Property Value

Type	Description
string	The foreground color. Default is "#000" (black).

Image

URL, data: URI, or raw base64 (will be prefixed) to render in the center.

Declaration

[Parameter]
public string Image { get; set; }

Property Value

Type	Description
string

ImageBackground

Background color under the logo (usually white).

Declaration

[Parameter]
public string ImageBackground { get; set; }

Property Value

Type	Description
string

ImageBackgroundOpacity

Background opacity under the logo (0..1). Default 1.

Declaration

[Parameter]
public double ImageBackgroundOpacity { get; set; }

Property Value

Type	Description
double

ImageCornerRadius

Rounded-corner radius for the logo cutout in module units. Default 0.75.

Declaration

[Parameter]
public double ImageCornerRadius { get; set; }

Property Value

Type	Description
double

ImagePaddingModules

Extra white padding around the logo in module units. Default 1.

Declaration

[Parameter]
public double ImagePaddingModules { get; set; }

Property Value

Type	Description
double

ImageSizePercent

Logo box size as % of the inner QR (without quiet zone). Safe range 5�60%. Default 20.

Declaration

[Parameter]
public double ImageSizePercent { get; set; }

Property Value

Type	Description
double

ModuleShape

Gets or sets the visual shape of the QR code modules (data squares). Square creates standard QR codes, Rounded creates softer corners, Circle creates dot-based codes.

Declaration

[Parameter]
public QRCodeModuleShape ModuleShape { get; set; }

Property Value

Type	Description
QRCodeModuleShape	The module shape. Default is Square.

Size

Gets or sets the rendered size (both width and height) of the QR code SVG. Accepts CSS units (e.g., "200px", "100%", "10rem"). Use percentage for responsive sizing.

Declaration

[Parameter]
public string Size { get; set; }

Property Value

Type	Description
string	The size in CSS units. Default is "100%".

Value

Gets or sets the text or data to encode in the QR code. Can be plain text, URLs, contact information (vCard), WiFi credentials, or any string data.

Declaration

[Parameter]
public string Value { get; set; }

Property Value

Type	Description
string	The data to encode. Default is empty string.

Methods

BuildRenderTree(RenderTreeBuilder)

A QR code generator component that creates scannable QR codes from text, URLs, or other data as SVG graphics. RadzenQRCode supports extensive customization including colors, shapes, error correction, and embedded logos. Encodes data in a two-dimensional barcode format scannable by smartphones and QR code readers. Generates QR codes entirely client-side as SVG, with no external dependencies. Features data encoding (text, URLs, contact info, WiFi credentials, or any string data), error correction levels (Low, Medium, Quartile, High) for different damage resistance, customization of colors for modules (dots) and background with custom shapes (Square, Rounded, Circle), optional logo/image embedding in the center of the QR code, eye styling to customize the appearance of the three corner finder patterns, and responsive size (percentage or pixel-based) for responsive layouts. Higher error correction levels allow the QR code to remain scannable even when partially damaged or obscured (e.g., by a logo). Use Quartile or High error correction when embedding logos.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable