Skip to main content

Barcode

The Barcode extension has two parts:

  • Barcode, a control that draws a barcode of its Text on the server and shows it on the page. It supports thirteen symbologies, from Code 39 and EAN-13 to QR codes and Data Matrix.
  • BarcodeReader, a component that decodes barcodes from a System.Drawing.Image on the server, or live in the browser from a Camera control.

Barcodes are generated and decoded on the server with ZXing.Net, which is compiled into the extension, so there is no extra package to install. Camera scanning runs in the browser with ZXing for JavaScript, so video frames never travel to the server.

Two Barcode controls selected in the Visual Studio designer: a Code 39 barcode with the label 1234567890, and a red QR code

A Code 39 barcode with its label, and a QR code drawn in red, in the Visual Studio designer.

Installation​

Add the Wisej-4-Barcode package to your Wisej.NET project:

dotnet add package Wisej-4-Barcode

The package targets .NET Framework 4.8 and .NET 8 or later (including the -windows, Android, iOS and Mac Catalyst targets). After a rebuild, Barcode and BarcodeReader appear in the Visual Studio toolbox.

To scan with the camera, also install the Camera extension (Wisej-4-Camera).

Displaying a barcode​

Set BarcodeType to the symbology and Text to the value to encode. The barcode is redrawn whenever either changes.

using Wisej.Web.Ext.Barcode;

var qrCode = new Barcode
{
    BarcodeType = BarcodeType.QR,
    Text = "https://wisej.com",
    ShowLabel = false,
    Size = new Size(150, 150)
};

var productCode = new Barcode
{
    BarcodeType = BarcodeType.Code_128,
    Text = "PRD-004521",
    Size = new Size(250, 80),
    Location = new Point(0, 160)
};

this.Controls.AddRange(new Control[] { qrCode, productCode });

Supported symbologies​

BarcodeType has these values. The default is Code_39.

ValueKindTypical use
Code_391DAlphanumeric IDs, inventory, badges
Code_1281DShipping and logistics labels, any ASCII text
EAN_8, EAN_131DRetail products (8 or 13 digits, including the check digit)
UPC_A1DRetail products in North America (12 digits)
ITF1DInterleaved 2 of 5, cartons and pallets (even number of digits)
Codabar1DLibraries, blood banks, parcel services
MSI1DWarehouse shelf labels
Plessey1DLegacy retail and library systems
QR2DURLs, contact cards, anything text
DataMatrix2DSmall parts marking, healthcare
PDF_4172D (stacked)Boarding passes, ID cards, shipping documents
Aztec2DTransport tickets
The value must fit the symbology

Each symbology restricts what it can encode: EAN-13 takes digits only, and ITF needs an even number of digits. When Text can't be encoded with the selected BarcodeType, ZXing.Net throws, and DrawBarCode() passes the exception on to your code. Validate user input before assigning it, or use a permissive symbology such as Code_128 or QR.

Appearance​

The barcode fills the control's client area minus its Padding, and it's drawn with the control's ForeColor, BackColor and Font. The red QR code in the screenshot above is simply ForeColor = Color.Red.

PropertyDefaultWhat it does
BarcodeTypeCode_39The symbology.
Text""The value encoded in the barcode.
ShowLabeltruePrints the value under the barcode, for the symbologies that support a human-readable label.
VerticalOffset0Moves the label up from the bottom edge, in pixels.
BorderStyleNoneThe control's border.
Leave a quiet zone

Scanners need an empty margin around a barcode (the quiet zone) to find it. On a colored background, set Padding on the control and keep a light BackColor behind dark bars. Low contrast and inverted colors (light bars on dark) read poorly on many scanners.

Saving or printing a barcode​

DrawBarCode() returns the barcode as an Image, drawn at the control's current size and with its current settings. Use it to save the barcode, embed it in a report, or send it to the browser as a file. Dispose the image when you're done.

private void buttonDownload_Click(object sender, EventArgs e)
{
    using (var image = this.barcode1.DrawBarCode())
    using (var stream = new MemoryStream())
    {
        image.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
        stream.Position = 0;
        Application.Download(stream, "barcode.png");
    }
}

Reading barcodes​

BarcodeReader is a component (it sits in the designer's component tray) that decodes barcodes in two ways.

From an image​

DecodeBarcode(image) decodes the first barcode it finds in an image, on the server with ZXing.Net. It returns the encoded text, or an empty string when no barcode is found. It doesn't need a camera, so it suits images the user uploads:

private void upload1_Uploaded(object sender, UploadedEventArgs e)
{
    using (var image = Image.FromStream(e.Files[0].InputStream))
    {
        var data = this.barcodeReader1.DecodeBarcode(image);

        if (data == "")
            AlertBox.Show("No barcode found.");
        else
            this.textBoxCode.Text = data;
    }
}

With a camera​

Set Camera to a Camera control on the same page and handle ScanSuccess. In the designer, Camera is a drop-down of the Camera controls on the form. Decoding happens in the browser, and only the result (e.Data) is sent to the server.

private void Page1_Load(object sender, EventArgs e)
{
    this.barcodeReader1.Camera = this.camera1;
    this.barcodeReader1.ScanMode = ScanMode.Automatic;
    this.barcodeReader1.ScanSuccess += barcodeReader1_ScanSuccess;
}

private void barcodeReader1_ScanSuccess(object sender, ScanEventArgs e)
{
    this.listBoxCodes.Items.Add(e.Data);
}

ScanMode decides when the reader looks for barcodes:

ModeBehavior
Automatic (default)Scans the video continuously and fires ScanSuccess for every barcode it detects.
AutomaticOnceStops after the first barcode. Call ResetScanner() to scan the next one.
ManualScans only when you call ScanImage(), which decodes the current frame and fires ScanSuccess, or ScanError if no barcode is found.

A "scan one, confirm, scan the next" workflow uses AutomaticOnce. The reader stops after each barcode and waits for the user to confirm it:

private void barcodeReader1_ScanSuccess(object sender, ScanEventArgs e)
{
    this.textBoxCode.Text = e.Data;    // the reader is now paused
}

private void buttonNext_Click(object sender, EventArgs e)
{
    this.listBoxCodes.Items.Add(this.textBoxCode.Text);
    this.barcodeReader1.ResetScanner();   // ready for the next barcode
}
Camera scanning has the Camera's requirements

The reader works on the Camera's stream, so it has the same requirements: the page must be served over HTTPS (or localhost), and the user must grant camera access. On phones, set the camera's FacingMode to Environment to use the rear camera, which usually focuses better at close range.

note

Scan results reach the server only while a ScanSuccess handler is attached. A reader with only a ScanError handler sends nothing.

Events​

EventWhen
ScanSuccessA barcode was decoded from the camera. e.Data is the text, and e.Success is true.
ScanErrorScanImage() found no barcode in Manual mode, or the camera image wasn't available.

Both events use ScanEventArgs.

API reference​