How to use .NET MAUI For QR Code scanner

With the rise of mobile applications leveraging QR Codes for quick information retrieval, the need for an efficient and easy-to-integrate QR Code scanner as well as a .NET MAUI Barcode scanner to scan Barcodes is growing. .NET MAUI (Multi-platform App UI), Microsoft's cross-platform framework, provides a unified environment for building applications across iOS, Android, macOS, and Windows. When scanning QR Codes in a .NET MAUI application, developers need an intuitive and powerful library to manage the process.

IronQR is a popular library that allows developers to generate and decode QR codes quickly, accurately, and reliably. This article will walk you through integrating IronQR with .NET MAUI to build a QR/ Barcode scanner that can work seamlessly across multiple platforms.

How to implement QR Barcode Scanning using IronQR

1. Create a .NET MAUI Project.
2. Install the IronQR NuGet package.
3. Set up permissions for camera and file storage.
4. Implement the QR Code Scanner.

Introduction to IronQR for .NET MAUI Mobile Apps

IronQR is a powerful, easy-to-use library that simplifies generating and decoding QR Codes in .NET applications, including .NET MAUI mobile apps for QR and Barcode scanning functionality. It provides fast and reliable solutions for integrating QR Code and Barcode scanning functionality across platforms such as iOS, Android, macOS, and Windows, which is essential for building cross-platform mobile apps.

Features of IronQR for .NET MAUI Mobile Apps

• Cross-Platform Support: Works seamlessly across iOS, Android, macOS, and Windows platforms within MAUI apps.
• QR Code Scanning: Efficiently decodes various types of QR Codes (URLs, text, contact information, etc.). It also supports multiple Barcodes read with efficient Barcode detection algorithms.
• QR Code Generation: This allows for the easy generation of QR Codes from data like URLs, texts, and more.
• Camera Permission Handling: Automatically handles camera permission requests, simplifying the scanning process.
• High Performance: Fast and reliable QR Code scanning and generation with minimal resource usage.
• Customizable Settings: Offers customization options for scanning parameters and QR Code appearance.
• Easy Integration: Simple API and minimal setup required to add QR Code scanning and generation to your .NET MAUI app.
• Error Handling: Provides detailed error messages and troubleshooting, ensuring smooth functionality in various scenarios.
• No External Dependencies: IronQR operates independently, reducing the need for third-party libraries or complex configurations, unlike the ZXing Barcode scanner.
• Multi-Format Support: Supports multiple QR Code formats, ensuring compatibility with a wide range of QR Codes used in the real world.

Pre-requisites

Before proceeding with the implementation, ensure that you have the following pre-requisites:

1. Visual Studio 2022 or later installed.
2. .NET 6.0 SDK or later (as .NET MAUI is built on .NET 6 and later versions).
3. IronQR NuGet Package for QR Code scanning and Barcode detection.
4. .NET MAUI app (You can create a new MAUI app in Visual Studio if you don't have one already).

Step 1: Create a .NET MAUI Project

To begin, let’s create a simple .NET MAUI project:

1. Open Visual Studio and click on Create a new project.

2. Select the .NET MAUI App template.

   

3. Name the project (e.g., MauiQRCodeScanner), select a location, and click Next.

   

   Select the required .NET version and click Create.

   

Step 2: Install the IronQR NuGet package

IronQR is a third-party library that provides QR Code generation and scanning functionalities. To install IronQR, you need to add it via NuGet:

1. In Visual Studio, right-click on the Dependencies in your Solution Explorer.
2. Click Manage NuGet Packages.
3. In the Browse tab, search for IronQR and click Install on the relevant package (usually IronQR or IronQR.Maui if specifically available for MAUI).

4. Accept any licenses and ensure that the library gets installed.

   

Step 3: Set up Permissions for camera and file storage

For your application to scan QR Codes, you'll need to request camera permissions on mobile platforms (iOS and Android). Here's how you can add the following permissions.

Android

In the AndroidManifest.xml file, add the camera permission:

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

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

iOS

In the Info.plist file, add the camera usage description:

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan QR codes</string>

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to scan QR codes</string>

Step 4: Implement the QR Code Scanner

Now, let’s create a simple UI for our QR scanner in the MAUI Barcode scanner app. We will use the Button to trigger the scanning process and a Label to display the scanned QR Code text.

Edit the MainPage.xaml file in the XML namespace.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MauiQRCodeScanner.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center">
        <Button x:Name="scanButton" Text="Scan QR Code" Clicked="OnScanButtonClicked" />
        <Label x:Name="resultLabel" Text="Scan Result will appear here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
</ContentPage>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MauiQRCodeScanner.MainPage">

    <StackLayout Padding="20" VerticalOptions="Center">
        <Button x:Name="scanButton" Text="Scan QR Code" Clicked="OnScanButtonClicked" />
        <Label x:Name="resultLabel" Text="Scan Result will appear here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
</ContentPage>

Now, in the MainPage.xaml.cs, you will handle the camera permissions and the QR Code scanning logic. Here’s how to implement it:

using IronQrCode;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Essentials;

namespace MauiQRCodeScanner
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            License.LicenseKey = "Your key";  // Add your IronQR license key here
            InitializeComponent();
        }

        // OnScanButtonClicked method with object sender as input
        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            // Check for camera permission
            var status = await Permissions.RequestAsync<Permissions.Camera>();
            if (status != PermissionStatus.Granted)
            {
                await DisplayAlert("Permission Denied", "Cannot scan QR codes without camera permission", "OK");
                return;
            }

            // Start scanning QR codes
            try
            {
                var images = await FilePicker.Default.PickAsync(new PickOptions
                {
                    PickerTitle = "Pick image",
                    FileTypes = FilePickerFileType.Images
                });
                var imageSource = images.FullPath.ToString();

                var inputBmp = AnyBitmap.FromFile(imageSource);
                // Load the asset into QrImageInput
                QrImageInput imageInput = new QrImageInput(inputBmp);

                // Create a QR Reader object
                QrReader reader = new QrReader();

                // Read the input and get all embedded QR Codes
                IEnumerable<QrResult> results = reader.Read(imageInput);

                if (results.Any())
                {
                    resultLabel.Text = "Scanned Text: " + results.First().Value; 
                    // Display the result
                }
                else
                {
                    resultLabel.Text = "No QR code detected";
                }
            }
            catch (Exception ex)
            {
                resultLabel.Text = "Error: " + ex.Message;
            }
        }
    }
}

using IronQrCode;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Essentials;

namespace MauiQRCodeScanner
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            License.LicenseKey = "Your key";  // Add your IronQR license key here
            InitializeComponent();
        }

        // OnScanButtonClicked method with object sender as input
        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            // Check for camera permission
            var status = await Permissions.RequestAsync<Permissions.Camera>();
            if (status != PermissionStatus.Granted)
            {
                await DisplayAlert("Permission Denied", "Cannot scan QR codes without camera permission", "OK");
                return;
            }

            // Start scanning QR codes
            try
            {
                var images = await FilePicker.Default.PickAsync(new PickOptions
                {
                    PickerTitle = "Pick image",
                    FileTypes = FilePickerFileType.Images
                });
                var imageSource = images.FullPath.ToString();

                var inputBmp = AnyBitmap.FromFile(imageSource);
                // Load the asset into QrImageInput
                QrImageInput imageInput = new QrImageInput(inputBmp);

                // Create a QR Reader object
                QrReader reader = new QrReader();

                // Read the input and get all embedded QR Codes
                IEnumerable<QrResult> results = reader.Read(imageInput);

                if (results.Any())
                {
                    resultLabel.Text = "Scanned Text: " + results.First().Value; 
                    // Display the result
                }
                else
                {
                    resultLabel.Text = "No QR code detected";
                }
            }
            catch (Exception ex)
            {
                resultLabel.Text = "Error: " + ex.Message;
            }
        }
    }
}

Code Explanation

• Permissions: We request camera permissions using Permissions.RequestAsync<Permissions.Camera>(). If the permission is denied, the user is shown an alert.
• IronQR Scanner: Use IronQR library objects and methods for scanning QR Codes. The QrReader.Read() method attempts to decode the QR Codes, and the result is shown on the label.

Input QR Code

Output

Select the required QR Code or capture it from the Camera feed.

The result is displayed in the UI as below.

IronQR License (Trial Available)

IronQR works with a license key in the mobile app code. Developers can easily get a trial license from the license page. Place the license somewhere in the code as below before using the IronQR library.

License.LicenseKey = "Your License";

License.LicenseKey = "Your License";

Conclusion

In this article, we walked through the process of building a QR Code scanner in a .NET MAUI application using IronQR. We started by setting up a .NET MAUI app, installed the IronQR package, and implemented the UI and scanning logic. IronQR makes QR Code scanning in a .NET MAUI app incredibly simple and effective.

IronQR library is designed to be cross-platform, ensuring that apps built with .NET MAUI can access QR Code functionality consistently across all target devices, whether they are smartphones, tablets, or desktop systems. IronQR also supports features like automatic camera permission handling, making it easier to integrate QR Code scanning without the hassle of managing permissions manually.

In short, IronQR for .NET MAUI enables developers to quickly implement QR Code scanning and generation features in their mobile apps, streamlining development and improving the user experience across all platforms.