.NET MAUI Barcode Scanner
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.
How to Read & Scan Barcodes in .NET MAUI
- Install C# library to read and scan barcodes
- Design the application front-end according to the task in .NET MAUI
- Get the image path of the given barcode image
- Use the
Readmethod to scan the provided barcode - Copy the result value with the
SetTextAsyncmethod
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 barcode 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
- Visual Studio 2022
- 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:
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>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 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 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)
{
// 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 SubYou 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.
Frequently Asked Questions
How can I read barcodes in a .NET MAUI application?
Using the IronBarcode .NET library, you can easily read barcodes in a .NET MAUI application. It provides a straightforward API that allows scanning from image files, memory streams, and PDFs, supporting various barcode formats.
What are the prerequisites for using IronBarcode in .NET MAUI?
Before using IronBarcode in a .NET MAUI app, ensure you have Visual Studio 2022 and a .NET MAUI project set up in Visual Studio.
Which barcode formats does IronBarcode support?
IronBarcode supports numerous barcode formats, including Code 39, Code 128, and PDF417, among others.
How do I install the IronBarcode library in my .NET MAUI app?
You can install IronBarcode via the NuGet Package Manager Console in Visual Studio by executing the specified console command to download the library.
What UI components are used in the barcode scanner frontend?
The frontend of the barcode scanner includes two buttons, a text area, and an image box for selecting the barcode, displaying the image, and copying the text.
How is a barcode image selected in the application?
The application uses a FilePicker to allow users to select a barcode image file. The path of the selected file is then used to display the image and read the barcode.
How does IronBarcode read the barcode text from an image?
IronBarcode uses the 'Read' function to decode the text from the barcode image file path, and the first result is displayed in the text editor.
How is the scanned barcode text copied in the .NET MAUI app?
The app uses a button function which copies the text from the Editor control to the clipboard and shows an alert message indicating success.
Is there an example project for using IronBarcode with .NET MAUI?
Yes, the article provides a GitHub link to a project example demonstrating how to implement barcode reading in .NET MAUI using IronBarcode.
Do I need a license to use IronBarcode in a commercial application?
Yes, IronBarcode requires a license for both development and commercial use. More information on licensing can be found on the IronBarcode licensing page.
Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.
