1. IronBarcode
2. Get Started
3. .NET MAUI Barcode Scanner & Reader

Introduction

.NET MAUI (.NET Multi-platform App UI) is a cross-platform framework to seamlessly create cross-platform applications in a single codebase. For example, you can easily create Microsoft Windows, iOS, and Android applications in one project. What separates it from other platforms, frameworks, and libraries is the way it lets the developer community use the native controls in their projects and provides them with extra components. As a result, developers can use these pre-made components and services to build the applications more quickly without writing every aspect of the code from scratch.

In this article, we'll explain how to integrate IronBarcode in a .NET MAUI Windows app to scan a barcode or QR code.

IronBarcode: C# Barcode Library

To read barcodes in our application, we'll be using the IronBarcode .NET library. It provides a robust and simple API for reading barcodes, allowing for development without any hassle or barcode domain knowledge. It can be easily installed with the NuGet package manager.

IronBarcode supports a multitude of barcodes formats for reading, including Code 39, Code 128, PDF417, among many others. You can read from a variety of data formats such as image files, memory streams, and PDFs.

Steps to Read Barcodes in a .NET MAUI App

Follow these steps to read a barcode in a .NET MAUI app.

Prerequisites

1. Visual Studio 2022
2. A .NET MAUI project in Visual Studio

Install IronBarcode Library

We can install the IronBarcode library using the NuGet Package Manager Console. To open this console in Visual Studio, navigate to Tools > NuGet Package Manager > Package Manager Console. Then, write the following command in the console:

Install-Package BarCode

This console command will download the latest version of the IronBarcode library in the MAUI project. Alternatively, you could also search for the latest version of the NuGet package on the NuGet website.

Front-End

The first step will be to create the front-end design. For this, we will create a layout that consists of two buttons, one text area, and one image box. One button will be used to select the barcode, and another will copy the text of the barcode. The Image box will show the selected image.

Replace the content in MainPage.xaml file with the following:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUI_Barcode.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUI_Barcode.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                x:Name="ImageSelect"
                Text="Select Barcode"
                SemanticProperties.Hint="Select Image"
                Clicked="SelectBarcode"
                HorizontalOptions="Center" />
            <Image
                x:Name="barcodeImage"
                SemanticProperties.Description="Selected Barcode"
                HeightRequest="200"
                HorizontalOptions="Center" />
            <Editor
                x:Name="outputText"
                Placeholder="Output text"
                HeightRequest="100"
                WidthRequest="500" />
            <Button
                x:Name="copyText"
                Text="Copy"
                SemanticProperties.Hint="Copy Text"
                WidthRequest="150"
                Clicked="CopyEditorText"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

All elements are in a vertical stack with the center position. You can change it according to your preference.

Barcode Scanning using IronBarcode

This section will describe the code for scanning barcodes using the IronBarcode library. First, we'll use a FilePicker to select the file and specify the file type for the image. After that, we will use the FullPath property to retrieve the image file's path and then set the source of the image box to the FullPath value. Finally, we will use the path value in the Read function of the BarcodeReader to retrieve the text.

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

private async void SelectBarcode(object sender, EventArgs e)
{
    // Use FilePicker to allow the user to select an image file.
    var images = await FilePicker.Default.PickAsync(new PickOptions
    {
        PickerTitle = "Pick image",
        FileTypes = FilePickerFileType.Images
    });

    // Get the full path of the selected image file.
    var imageSource = images.FullPath.ToString();

    // Set the source of the Image view to the selected image's path.
    barcodeImage.Source = imageSource;

    // Use IronBarcode to read the barcode from the image file and get the first result.
    var result = BarcodeReader.Read(imageSource).First().Text;

    // Display the read result in the Editor.
    outputText.Text = result;
}

Private Async Sub SelectBarcode(ByVal sender As Object, ByVal e As EventArgs)

	' Use FilePicker to allow the user to select an image file.

	Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {

		.PickerTitle = "Pick image",

		.FileTypes = FilePickerFileType.Images

	})



	' Get the full path of the selected image file.

	Dim imageSource = images.FullPath.ToString()



	' Set the source of the Image view to the selected image's path.

	barcodeImage.Source = imageSource



	' Use IronBarcode to read the barcode from the image file and get the first result.

	Dim result = BarcodeReader.Read(imageSource).First().Text



	' Display the read result in the Editor.

	outputText.Text = result

End Sub

The code shown below will be used to copy the text editor's text and display an alert message to the user that the text is copied.

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

private async void CopyEditorText(object sender, EventArgs e)
{
    // Copy the text from the Editor to the clipboard.
    await Clipboard.SetTextAsync(outputText.Text);

    // Show a success message to the user.
    await DisplayAlert("Success", "Text is copied!", "OK");
}

Private Async Sub CopyEditorText(ByVal sender As Object, ByVal e As EventArgs)

	' Copy the text from the Editor to the clipboard.

	Await Clipboard.SetTextAsync(outputText.Text)



	' Show a success message to the user.

	Await DisplayAlert("Success", "Text is copied!", "OK")

End Sub

You can find the project source code in this article on GitHub.

Output

After running the project, you'll see the following output. The image is not showing because it is not selected yet.

Output when no image is selected

When the barcode is selected, it'll show like the below screenshot, and the output text of the QR Code will be shown in the editor.

Output after image is selected

Clicking the Copy button will trigger the alert window mentioned before to appear.

Copy alert

Conclusion

In this article, we explained how we can read barcodes in a .NET MAUI application using IronBarcode. As a QR code reader, IronBarcode performs very well—it provides the exact output as expected. Moreover, it can read barcodes that are difficult to read. You can also create and customize barcodes by using different fonts. Get more tutorial posts regarding IronBarcode from this link.

IronBarcode must be licensed for development and commercial use. You can find more information on licensing here.