.NET MAUI Barcode Scanner using IRONBARCODE

.NET MAUI Barcode Scanner using IRONBARCODE

Introduction

.NET MAUI

.NET MAUI, a cross-platform framework, empowers developers to build native
mobile and desktop applications using C# and XAML. It enables the creation of
apps that seamlessly operate on Android, iOS, macOS, and Windows, all from a
unified codebase. This open-source platform is an advancement of Xamarin
Forms, expanding its reach to desktop scenarios while enhancing UI controls
for improved performance and extensibility.

Using .NET MAUI, you have the capability to develop applications that can run
on multiple platforms such as Android, iOS, MacOS, and Windows, all from a
single codebase.

.NET MAUI allows for efficient cross-platform development, reducing the need
for separate codebases for each platform and simplifying the maintenance and
updates of your application.

.NET MAUI saves time and effort and makes it easier to maintain your apps.
Visual Studio 2022 is avail with dotnet 7 with .Net Maui app development

In this article, we will see how we can implement a QR code or barcode scanner
in the .NET MAUI project using IronBarcode Library.

IronBarcode: C# Barcode Library

The IronBarcode library simplifies barcode detection in .NET applications with
its intuitive APIs and eliminates the need for intricate barcode object
creation. It offers a wide range of QR code and barcode formats such as Code
39, Code 128, and PDF417.

As a versatile .NET library, it can also function as a QR code reader,
decoding input data into readable text from various sources like images and
streams. This article explores how to leverage the IronBarcode library for QR
code scanning in .NET MAUI applications, providing a comprehensive guide.

Quick Links:

Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new
    project to create a new project.

  • In the Create a new project window, select MAUI in the All project types
    drop-down, select the .NET MAUI App template, and click the Next button:

  • In the configure your new project window, name your project, choose a
    suitable location for it, and click the Next button:

  • In the Additional information window, click the Create button:

  • Once the project is created, we can able to see the Android, iOS, Windows
    and other running options in the toolbar. Press the emulator or run button
    to build and run the app

Install IronBarcode Library

To install the IronBarcode library via the NuGet Packages Console, simply
execute the following command or visit the Nuget package website or search in
the Nuget package Manager to download the latest version of the library.

Install-Package BarCode

Implementation of File Picker functionality

Ironbarcode library will read the barcode from the selected image and provide
the result. For File Picker functionality, visit the official
.NET MAUI essentials
link and set up all the mentioned steps in the link.

Designing the screen

In this tutorial, we are using Image, Button, and Editor controls. You can
change the design as per your preferences.

<?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"
                    />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Here,

  • Button – used to select barcode images that need to be read.
  • Image – used to display the selected barcode image.
  • Editor – used to display the scanned result from Iron Barcode Library.

Functionality of the screen

  • Add a click event for the button to select the image like below. This
    event will allow the app to select the barcode image.

    private async void SelectBarcode(object sender, EventArgs e)
    
    	var images = await FilePicker.Default.PickAsync(new PickOptions
    	
    		PickerTitle = "Pick Barcode/QR Code Image",
    		FileTypes = FilePickerFileType.Images
    	);
    	var imageSource = images.FullPath.ToString();
    	barcodeImage.Source = imageSource;
    	var result = BarcodeReader.Read(imageSource).First().Text;
    	outputText.Text = result;	
    
  • Once the barcode image is selected, the File Picker will return the full
    path of the file.
  • We will assign the file path to the image control to preview the selected
    image.
  • As well as the selected image’s file path will be sent as input to the
    barcode read library.
  • Once the input is processed, the library will return the scanned output as
    a result of the barcode read function. This output will be assigned to the
    editor control for displaying the result in human-readable text.

Full Code

using IronBarCode;

namespace MAUI_Barcode;

public partial class MainPage : ContentPage


	public MainPage()
	
		InitializeComponent();
	

	private async void SelectBarcode(object sender, EventArgs e)
	
		var images = await FilePicker.Default.PickAsync(new PickOptions
		
            PickerTitle = "Pick Barcode/QR Code Image",
            FileTypes = FilePickerFileType.Images
		);
		var imageSource = images.FullPath.ToString();
		barcodeImage.Source = imageSource;
		var result = BarcodeReader.Read(imageSource).First().Text;
		outputText.Text = result;
		
    

Output

Upon selecting the barcode, the editor will display a screenshot similar to
the one below, with the output text of the QR Code visible.

Before selecting the barcode, similar to other platforms as well:

After selecting the barcode:

Download Code:

You can download the code from
GitHub. If you have
any doubts, feel free to post a comment. If you liked this article, and it
is useful to you, do like, share the article & star the repository on
GitHub.

Conclusion

This article detailed the process of barcode reading in a .NET MAUI
application using IronBarcode. IronBarcode proves to be a comprehensive
solution equipped with essential tools for barcode operations. Functioning as
a QR code reader, IronBarcode delivers accurate and expected output, even when
dealing with intricate barcodes. Furthermore, it offers the flexibility to
create and customize barcodes using a variety of fonts.

IronBarcode is available for free for development purposes, but a license
must be purchased for commercial use. To obtain information about the
licensing options, please refer to the following link:
https://ironsoftware.com/csharp/barcode/licensing

Next Post

Dirige el tráfico desde CUALQUIER canal a tus mensajes directos de Instagram utilizando la URL de referencia de IG.

🇧🇷 translation/tradução Manychat es la plataforma líder mundial de marketing por chat que te permite ahorrar tiempo y aumentar la conversión utilizando tus canales de marketing favoritos como Instagram, Facebook, WhatsApp, Telegram y Email (solo por mencionar algunos 😉). Pero, ¿qué pasa si tienes una audiencia comprometida en plataformas como […]
Dirige el tráfico desde CUALQUIER canal a tus mensajes directos de Instagram utilizando la URL de referencia de IG.