How to create barcodes in .NET MAUI App using C# Barcode Generator library?

Detailed step-by-step instructions for generating and printing QR Code, barcodes in .NET MAUI app Using C# Code

C# Barcode Generator Library

QR Code, Data Matrix, Code 128, GS1, EAN/UPC. Unicode text encoding supported.

Download Now

NuGet Ready

.NET 5+

.NET Framework 4.x, 3.x, 2.x

How to create barcode in C# .NET MAUI app?

Here we will provide a step-by-step guide how to build a .NET MAUI app with barcode generation feature enabled. It is a simple MAUI app which allows user to enter Code 128 barcode text and print barcode on the MAUI view.

After finish the tutorial, you can also further customize the C# code to add more barcode options, such as generating styled QR Code with logo image inside.

Prerequisites

BarcodeLib.com's Barcode for .NET (BarcodeLib.Barcode.SkiaSharp.dll)
.NET 10, 9, 8, 7, 6, 5, .NET Core 3.1, 2.1
Microsoft Visual Studio .NET

1. Create a new .NET MAUI project

Here we will quickly create a new .NET MAUI app using Visual Studio.

Launch Visual Studio 2026 and choose Create a new project.
Find and choose .NET MAUI Blazor Hybrid App template; and then click Next button.
Use project name BarcodeLib.CsharpBarcodeGenerator.MAUI.Demo for this demo.
On the Additional information screen, choose target framework .NET 10.0, and then click Create.
Now, all template auto-generated contents would be listed in the Solution Explorer.

2. Install Barcode Generator library and Nuget package

Now we will add and install BarcodeLib C# barcode generator library (dll file) to the new .NET MAUI project and also add the a Nuget package named "SkiaSharp".

Add BarcodeLib C# Barcode Generator library

Right-click Dependencies in the Solution Explorer, and click Manage NuGet Packages....
Find package SkiaSharp in the NuGet Package Manager and install the package.

Note: BarcodeLib.Barcode.SkiaSharp.dll requires SkiaSharp Version 2.80.0 or later.
Add required library BarcodeLib.Barcode.SkiaSharp.dll to the project.
Ensure required libraries have been added to this project successfully.

Design the user interface

Step 1: click App.xaml.cs in the Solution Explorer and change start window's title and size.

Property Title: BarcodeLib C# Barcode Generator Library on .NET MAUI App
Property Width: 550
Property Height: 950

protected override Window CreateWindow(IActivationState? activationState)
{
    var window = new Window(new MainPage()) {
        Title = "BarcodeLib C# Barcode Generator Library on .NET MAUI App"      //  Set Title
    };

    //  Set window's default size in Windows platform.
    if (DeviceInfo.Current.Platform == DevicePlatform.WinUI)
    {
        window.Width = 550;
        window.Height = 950;
    }

    return window;
}

Step 2: open NavMenu.razor and change the title.

<a class="navbar-brand" href="">BarcodeLib C# Barcode Generator Library on .NET MAUI App</a>

Step 3: open the Home.razor file, and replace its default content with the following structured markup.

@page "/"

<PageTitle>BarcodeLib C# Barcode Generator Library on .NET MAUI App</PageTitle>
<hr />

<div style="text-align: center; ">
    <input id="Text1" type="text" style="width: 360px; " />
    <hr />
    <input id="Button1" type="button" value="Refresh" />
    <hr />
    <img src="" width="360" />
    <hr />
</div>

List of HTML elements to add:

An input text element for inputting data message. Set width to 360 pixels.
A Button for refreshing the barcode image. Set attribute value to Refresh.
An Image for showing the barcode. Set the width to 360 pixels.

4. Add C# codes to controls event handler

Step 1: Right-click Home.razor and choose Add Home.razor.cs to create a file Home.razor.cs.

Step 2: replace all contents in the Home.razor.cs file by the following C# codes.

using BarcodeLib.Barcode;
using SkiaSharp;

namespace BarcodeLib.CsharpBarcodeGenerator.MAUI.Demo.Components.Pages
{
    public partial class Home
    {
        //  Barcode message.
        protected string? Message { get; set; } = "Code 128";
        //  Barcode image in string format with encoding Base64.
        protected string? BarcodeImage { get; set; }

        protected override void OnInitialized()
        {
            //  Show default barcode image.
            refreshBarcodeImage();
        }

        // Define the Handler in Code-Behind
        private async Task RefreshBarcodeImage()
        {
            //  Show current barcode image.
            refreshBarcodeImage();
            StateHasChanged();
        }

        //  Refresh barcode image.
        private void refreshBarcodeImage()
        {
            //  Create a new Code 128 barcode
            Linear linear = new Linear();
            linear.Type = BarcodeType.CODE128;
            //  Set data to the current content in the input (text).
            linear.Data = this.Message;
            //  Draw barcode to SKBitmap and convert to byte array.
            SKBitmap bitmap = linear.drawBarcode();
            SKData data = bitmap.Encode(SKEncodedImageFormat.Png, 100);
            var bytes = data.ToArray();

            //  Encode image data bytes to string with Base64.
            this.BarcodeImage = $"data:image/png;base64,{Convert.ToBase64String(bytes)}";
        }
    }
}

Binding code-behind to HTML elements

Step 1: establish a two-way data binding connection that synchronizes the attribute value of the HTML <input> text element directly with the property Message.
```
<input id="Text1" type="text" style="width: 360px; " @bind-value="@Message" />
```
Step 2: use one-way data binding to bind the value of the property BarcodeImage to the attribute src of the HTML <img> element.
```
<img src="@BarcodeImage" width="360" />
```
Step 3: add the @onclick attribute on the <input> button element, and assign it the name of the method RefreshBarcodeImage
```
<input id="Button1" type="button" value="Refresh" onclick="@RefreshBarcodeImage" />
```

File: Home.razor

@page "/"

<PageTitle>BarcodeLib C# Barcode Generator Library on .NET MAUI App</PageTitle>
<hr />

<div style="text-align: center; ">
    <input id="Text1" type="text" style="width: 360px; " @bind-value="@Message" />
    <hr />
    <input id="Button1" type="button" value="Refresh" onclick"@RefreshBarcodeImage" />
    <hr />
    <img src="@BarcodeImage" alt="" width="360" />
    <hr />
</div>

Build and Run the project (On Windows)

Choose the Windows Machine and then click.

The Visual Studio will launch as a native Windows desktop app as below.

Change the barcode text message and then click Refresh button to update the barcode image on the MAUI app.

Related Barcode Library

VB.NET Barcode Unicode Encoding Guide, .NET Framework Barcoding Guide, ASP.NET Web Barcoding Guide, Barcoding Guide for .NET Windows Forms, Crystal Reports Barcoding Guide, Reporting Services Barcoding Guide, .NET Barcode Sanning Guide, Java Barcoding Guide, Barcode Generator Software.