.NET MAUI Barcode Scanner
Introduction
.NET MAUI (.NET Multi-platform App UI) is a cross-platform framework that can help to create cross-platform applications in a single codebase more easily. 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, I'll explain how we can scan a QR code or a barcode in the .NET MAUI Windows app.
How to Read & Scan Barcode in .NET Maui
IronBarcode: C# Barcode Library
IronBarcode is the .NET library that helps to create barcodes easily in the programs. It provides a robust and easy set of default APIs. The IronBarcode library offers functionality to generate and read QR codes or other barcodes at an object level, so you can develop them one at a time by calling their methods without having to worry about the details of creating a barcode object and prior knowledge. In addition, it doesn't require any loading of external dependencies to work and can be downloaded easily using NuGet Package Manager.
IronBarcode supports multiple QR and modern barcode formats like Code 39, Code 128, PDF417, and many more. You can also use this .NET library as a QR code reader as well as builder. It decodes the input data into human-readable text. You can get input from images, streams, GIFs, and many more. This article will also explain how we can use the IronBarcode library to read and scan QR codes in .NET MAUI apps.
Steps to Read and Scan Barcode in .NET MAUI App
Follow the next steps to read the QR code in the .NET MAUI app.
Prerequisites
- Visual Studio 2022
- A running .NET MAUI project in Visual Studio
- Stable internet to install the IronBarcode library for barcode scanning
Suppose you have the above prerequisites then, you can move to the next step.
Install IronBarcode Library
We can install the IronBarcode library using the NuGet Packages Console. 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. But, of course, you can always check and search for the latest version of the NuGet package library on the NuGet website.
Frontend
As the first step, we have to create the front-end design.
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>All elements are in 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)
{
var images = await FilePicker.Default.PickAsync(new PickOptions
{
PickerTitle = "Pick image",
FileTypes = FilePickerFileType.Images
});
var imageSource = images.FullPath.ToString();
barcodeImage.Source = imageSource;
var result = BarcodeReader.Read(imageSource).First().Text;
outputText.Text = result;
}private async void SelectBarcode(object sender, EventArgs e)
{
var images = await FilePicker.Default.PickAsync(new PickOptions
{
PickerTitle = "Pick image",
FileTypes = FilePickerFileType.Images
});
var imageSource = images.FullPath.ToString();
barcodeImage.Source = imageSource;
var result = BarcodeReader.Read(imageSource).First().Text;
outputText.Text = result;
}Private Async Sub SelectBarcode(ByVal sender As Object, ByVal e As EventArgs)
Dim images = Await FilePicker.Default.PickAsync(New PickOptions With {
.PickerTitle = "Pick image",
.FileTypes = FilePickerFileType.Images
})
Dim imageSource = images.FullPath.ToString()
barcodeImage.Source = imageSource
Dim result = BarcodeReader.Read(imageSource).First().Text
outputText.Text = result
End SubThe 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)
{
await Clipboard.SetTextAsync(outputText.Text);
await DisplayAlert("Success", "Text is copied!", "OK");
}private async void CopyEditorText (object sender, EventArgs e)
{
await Clipboard.SetTextAsync(outputText.Text);
await DisplayAlert("Success", "Text is copied!", "OK");
}Private Async Sub CopyEditorText(ByVal sender As Object, ByVal e As EventArgs)
Await Clipboard.SetTextAsync(outputText.Text)
Await DisplayAlert("Success", "Text is copied!", "OK")
End SubYou can get this project for reading and scanning code 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, it was explained how we can read barcodes in the .NET MAUI application using IronBarcode. IronBarcode is a complete product with all the necessary tools that enable barcode operations. As a QR code reader, IronBarcode performs very well. It provides the exact output as expected. Moreover, it can read complex barcodes. You can also create and customize the barcodes by using different fonts. Get more tutorial posts regarding IronBarcode from this link.
IronBarcode is free for development purposes. But for commercial use, you've to purchase the license. You can get the information regarding the license using the following link.
