ZXing for MAUI (MobileBarcodeScanner)

Question

I have a project that I have in xamarin and I want to transfer it to MAUI but I have encountered a problem and that is that ZXing.Mobile is not for MAUI and I have downloaded ZXing.Net.Maui.

The problem is that I don't have this function ZXing.Mobile.MobileBarcodeScanner(); I implement it in the following code:

async void OnScanButtonClickedL10(object sender, EventArgs e)
{
    var scanner = new ZXing.Mobile.MobileBarcodeScanner();
    var result = await scanner.Scan();

    if (result != null)
    {
        string EanCode = result.Text;
        txtL10EanCode.Text = EanCode;
    }
}

What the app did was open the camera and when I scanned the code it came back. Is there something like this in the ZXing.Net.MAUI library or will I always have to create a view?

Answer 1

Yes, you can also use ZXing.Net.Maui.Controls and you need to create a zxing:CameraBarcodeReaderView to detect or scan the barcode.

Here are the detailed steps to implement it:

1. Install ZXing.Net.Maui.Controls NuGet package on your .NET MAUI application

2. Make sure to initialize the plugin first in your MauiProgram.cs, see below

// Add the using to the top
using ZXing.Net.Maui;
using ZXing.Net.Maui.Controls;

// ... other code 

public static MauiApp Create()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseBarcodeReader(); // Make sure to add this line

    return builder.Build();
}

3. Now we just need to add the right permissions to our app metadata.

Android:

Add below to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

iOS:

Add below to info.plist file:

<key>NSCameraUsageDescription</key>
<string>This app uses barcode scanning to...</string>

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.Controls"

XAML:

<zxing:CameraBarcodeReaderView
x:Name="cameraBarcodeReaderView"
BarcodesDetected="BarcodesDetected" />

Handle detect code:

public MainPage()
{
       InitializeComponent();

       cameraBarcodeReaderView.Options = new BarcodeReaderOptions
       {
               Formats = BarcodeFormats.OneDimensional,
               AutoRotate = true,
               Multiple = true
        };
}

protected void BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
           var result = e.Results?.FirstOrDefault();
           if (result is null) return;

           Dispatcher.DispatchAsync(async () =>
           {
               await DisplayAlert("Barcode detected", result.Value, "OK");
           });

}

For mode detaisl, you can refer to Barcode Scanning