.NET MAUI is a powerful platform for building cross-platform mobile applications, and with the right tools and resources, it's easy to add barcode scanning functionality to your app. In this tutorial, we'll walk you through the steps of implementing a barcode scanner in .NET MAUI using the ZXing.Net.MAUI plugin.
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
Implementation:
The successor to ZXing.Net.Mobile: barcode scanning and generation for .NET MAUI applications. First, we need to add the ZXing.Net.MAUI library to our project as a dependency. To do this, open the NuGet Package Manager and search for "ZXing.Net.MAUI". Install the package in your .NET MAUI project.
Install ZXing.Net.MAUI
Install
ZXing.Net.MAUI
NuGet package on your .NET MAUI application.
Make sure to initialize the plugin first in your
MauiProgram.cs
, see below
// Add the using to the top
using ZXing.Net.Maui;
// ... other code
public static MauiApp Create()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseBarcodeReader(); // Make sure to add this line
return builder.Build();
}
Now we just need to add the right permissions to our app metadata. Find below how to do that for each platform.
Android
For Android go to your "AndroidManifest.xml" file (under the Platforms\Android folder) and add the following permissions inside of the "manifest" node.
<uses-permission android:name="android.permission.CAMERA" />
iOS
For iOS go to your "info.plist" file (under the Platforms\iOS folder) and add the following permissions inside of the "dict" node:
<key>NSCameraUsageDescription</key>
<string>This app uses barcode scanning to...</string>
Make sure that you enter a clear and valid reason for your app to access the camera. This description will be shown to the user.
Windows
Windows is not supported at this time for barcode scanning. You can however use the barcode generation. No extra permissions are required for that. For more information on permissions, see the Microsoft Docs.
Using ZXing.Net.Maui
If you're using the controls from XAML, make sure to add the right XML namespace in the root of your file, e.g:
xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI"
<zxing:CameraBarcodeReaderView
x:Name="cameraBarcodeReaderView"
BarcodesDetected="BarcodesDetected" />
Full Code of MainPage.xaml:
Configure Reader options
cameraBarcodeReaderView.Options = new BarcodeReaderOptions
{
Formats = BarcodeFormats.OneDimensional,
AutoRotate = true,
Multiple = true
};
Toggle Torch
cameraBarcodeReaderView.IsTorchOn = !cameraBarcodeReaderView.IsTorchOn;
Flip between Rear/Front cameras
cameraBarcodeReaderView.CameraLocation
= cameraBarcodeReaderView.CameraLocation == CameraLocation.Rear ? CameraLocation.Front : CameraLocation.Rear;
Handle detected barcode(s)
protected void BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
foreach (var barcode in e.Results)
Console.WriteLine($"Barcodes: {barcode.Format} -> {barcode.Value}");
}
Full code of MainPage.xaml.cs
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances