USING IRONQR

How to use .NET MAUI For QR Code scanner

Published July 1, 2024
Share:

Introduction

In the age of pervasive mobile computing, QR codes are becoming a necessary tool for smooth and rapid information sharing. QR codes are used in everything from digital payments to product packaging. Adding QR code scanning capability to your mobile applications as a developer can improve user experience and lead to a plethora of opportunities. This post will walk you through creating a .NET MAUI barcode scanner and QR code reader with IronQR.

How to use .NET MAUI For QR Code scanner: Figure 1 - Iron QR: The C# QR Code Library

How to use .NET MAUI For QR Code scanner

  1. Install .NET MAUI and IronQR NuGet Packages
  2. Create Main Page Layout
  3. Initialize Camera
  4. Capture Image
  5. Read the QR Code
  6. Display Result
  7. Handle Permissions

Understanding .NET MAUI

A framework called .NET Multi-platform App UI (.NET MAUI) allows C# and XAML to be used to create native cross-platform applications. With only one codebase, developers can now produce apps for Windows, macOS, iOS, and Android. .NET MAUI offers a uniform API to access native device functionalities, making the process of creating cross-platform applications easier. The following are some key elements of .NET MAUI that make it an effective tool for developers:

Single Project Structure

Platform-specific projects are combined into a unified project structure using .NET MAUI. Due to this unification, developers can handle all platform-specific resources and code in a single project, thereby streamlining the development process.

Cross-Platform User Interface

You may design a single user interface (UI) that works on several platforms with .NET MAUI. The framework offers a collection of layouts and controls that are compatible with Windows, macOS, iOS, and Android.

Native Access and Integration

With the help of .NET MAUI, developers can take advantage of native APIs and platform-specific features, enabling them to use sensors, cameras, GPS, and other device capabilities. By doing this, apps may share much of the codebase across platforms and still offer a native user experience.

Hot Reload

.NET MAUI supports Hot Reload for XAML and C#. With the help of this functionality, developers can view UI changes instantaneously without having to restart the program. Hot Reload facilitates rapid iterations and instant feedback, which speeds up the development process.

Blazor Integration

Because of the integration between Blazor and .NET MAUI, developers can use Blazor components to create hybrid apps. With this integration, creating modern applications is made flexible by combining Blazor's web development capabilities with MAUI's expertise in native mobile development.

Resource Management

The management of resources, including pictures, fonts, and styles, across several platforms is made easier by .NET MAUI. By defining resources only once, developers may utilize them for all target platforms, minimizing redundancy and guaranteeing a consistent appearance and feel.

Dependency Injection

Dependency injection is supported out of the box by .NET MAUI, which helps developers build more tested and maintainable code. Building complicated applications that need a clear division of responsibilities and modular architecture requires this functionality.

What is IronQR?

A robust and adaptable .NET library for creating and reading QR codes is called IronQR. By offering reliable and user-friendly capabilities for both making and reading QR codes, it streamlines the process of utilizing QR codes in .NET applications. The Iron Software package, which included IronQR, is a collection of libraries designed to improve .NET programming.

Features of IronQR

IronQR is a useful tool for developers who work with QR codes because of its extensive feature set. Here are a few of its salient attributes:

QR Code Generation

IronQR makes it simple to create QR codes. Quickly and effectively, developers can generate QR codes from text, URLs, and other kinds of data.

  • Superior QR Codes: The library produces high-quality, high-resolution QR codes that are appropriate for a range of applications, such as digital displays and printing.
  • Options for Customization: You can change the colors, sizes, margins, and other aspects of how QR codes look.

QR Code Reading

Strong functionality is offered by IronQR for reading QR codes from pictures and streams.

  • Support for Multiple Formats: JPEG, PNG, BMP, and GIF are just a few of the picture formats from which the library can read QR codes.
  • Error Correction: IronQR has sophisticated error correction built in, so it can read QR codes correctly even if they are partially broken or obscured.

Advanced Customization

With the wide range of customization possibilities that IronQR provides, developers may create and interpret QR codes that are specifically tailored to their needs.

  • Styles: You can add logos or photos to QR codes and change the background and foreground colors.
  • Data Encoding: Provides interoperability with several information formats by supporting multiple data encoding options.

Batch Processing

Batch processing is supported by IronQR, enabling the creation and reading of several QR codes simultaneously. Applications that need to efficiently handle massive numbers of QR codes may find this capability especially helpful.

Performance and Efficiency

Because of the library's high-performance design, creating and reading QR codes can be done quickly. For apps that need to process QR codes in real time, this is crucial.

Integration with .NET Ecosystem

IronQR is simple to use with ASP.NET, Windows Forms, WPF, and Xamarin applications, among other .NET application types, because of its smooth integration with the .NET environment.

Getting Started with .NET MAUI Application

Installing Visual Studio 2022 and the .NET 6 framework is required to create a C#.NET MAUI application. Then, to construct a .NET MAUI app, proceed with the following steps.

Open Visual Studio

Click on the "Create a New Project" button after opening Visual Studio. Next, use the search bar to look up ".NET MAUI project."

How to use .NET MAUI For QR Code scanner: Figure 2 - Create a new project

Select .NET MAUI App

Choose the .NET MAUI app template from Visual Studio's search results. Once you've chosen it, give it a fitting name and decide where the project will be held. After setting up, press the "Next" button.

How to use .NET MAUI For QR Code scanner: Figure 3 - Choose the .NET MAUI app template

Select Framework

Choose the necessary framework; nevertheless, it is advised to use the most recent iteration of the .NET framework. Click "Create" once you have chosen the framework version in Visual Studio.

How to use .NET MAUI For QR Code scanner: Figure 4 - Select the framework as desired

Install IronQR

Navigate to the Package Manager Console under Tools -> NuGet Package Manager. In the command-line panel that displays, type the following command and hit ENTER:

Install-Package IronQR

The aforementioned command will install our library into the running project and download it.

Building the QR Code Scanner

Creating the user interface is the initial stage in developing the QR code scanner. A button to initiate the QR code scanning process and an image to show the scanned QR code will be part of our basic user interface (UI) that we will build using XAML.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <Button Text="Scan QR Code" Clicked="OnScanButtonClicked"/>
        <Image x:Name="QrCodeImage" WidthRequest="200" HeightRequest="200" VerticalOptions="CenterAndExpand"/>
        <Label x:Name="QrCodeResult" Text="Scan Result" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
</ContentPage>

The ability to use IronQR to read QR codes must then be implemented. We'll write a function to handle the button click event and take a picture of the QR code with the device's camera.

Add the following code to MainPage.xaml.cs after opening it:

using IronQr;
using IronSoftware.Drawing;
using Microsoft.Maui.Controls;
using System;
using System.IO;
using System.Threading.Tasks;

namespace MauiAppQR
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            var result = await CaptureAndScanQrCode();
            QrCodeResult.Text = result ?? "No QR code found.";
        }

        private async Task<string> CaptureAndScanQrCode()
        {
            try
            {
                var photo = await MediaPicker.CapturePhotoAsync();
                if (photo == null)
                    return null;

                using var stream = await photo.OpenReadAsync();
                using var memoryStream = new MemoryStream();
                await stream.CopyToAsync(memoryStream);
                var imageData = memoryStream.ToArray();

                QrReader reader = new QrReader();
                var inputBmp = AnyBitmap.FromBytes(imageData);
                QrImageInput imageInput = new QrImageInput(inputBmp);

                var barcodeResult = reader.Read(imageInput);

                if (barcodeResult?.Count > 0)
                {
                    QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(imageData));
                    return barcodeResult.First().Value;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error scanning QR code: {ex.Message}");
            }
            return null;
        }
    }
}
using IronQr;
using IronSoftware.Drawing;
using Microsoft.Maui.Controls;
using System;
using System.IO;
using System.Threading.Tasks;

namespace MauiAppQR
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            var result = await CaptureAndScanQrCode();
            QrCodeResult.Text = result ?? "No QR code found.";
        }

        private async Task<string> CaptureAndScanQrCode()
        {
            try
            {
                var photo = await MediaPicker.CapturePhotoAsync();
                if (photo == null)
                    return null;

                using var stream = await photo.OpenReadAsync();
                using var memoryStream = new MemoryStream();
                await stream.CopyToAsync(memoryStream);
                var imageData = memoryStream.ToArray();

                QrReader reader = new QrReader();
                var inputBmp = AnyBitmap.FromBytes(imageData);
                QrImageInput imageInput = new QrImageInput(inputBmp);

                var barcodeResult = reader.Read(imageInput);

                if (barcodeResult?.Count > 0)
                {
                    QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(imageData));
                    return barcodeResult.First().Value;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error scanning QR code: {ex.Message}");
            }
            return null;
        }
    }
}
Imports IronQr
Imports IronSoftware.Drawing
Imports Microsoft.Maui.Controls
Imports System
Imports System.IO
Imports System.Threading.Tasks

Namespace MauiAppQR
	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Async Sub OnScanButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			Dim result = Await CaptureAndScanQrCode()
			QrCodeResult.Text = If(result, "No QR code found.")
		End Sub

		Private Async Function CaptureAndScanQrCode() As Task(Of String)
			Try
				Dim photo = Await MediaPicker.CapturePhotoAsync()
				If photo Is Nothing Then
					Return Nothing
				End If

				Dim stream = Await photo.OpenReadAsync()
				Dim memoryStream As New MemoryStream()
				Await stream.CopyToAsync(memoryStream)
				Dim imageData = memoryStream.ToArray()

				Dim reader As New QrReader()
				Dim inputBmp = AnyBitmap.FromBytes(imageData)
				Dim imageInput As New QrImageInput(inputBmp)

				Dim barcodeResult = reader.Read(imageInput)

				If barcodeResult?.Count > 0 Then
					QrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(imageData))
					Return barcodeResult.First().Value
				End If
			Catch ex As Exception
				Console.WriteLine($"Error scanning QR code: {ex.Message}")
			End Try
			Return Nothing
		End Function
	End Class
End Namespace
VB   C#
  • OnScanButtonClicked: When a user hits the "Scan QR Code" button, this method is called. To take a picture using the device's camera and search for QR codes, it invokes the CaptureAndScanQrCode function.
  • CaptureAndScanQrCode: This method uses the device's camera to take a picture, and then IronQR is used to read the QR code from the picture.
    • MediaPicker.CapturePhotoAsync: This API uses the camera on the device to take a picture.
    • MemoryStream: To make it easier for IronQR to read, the captured image is loaded into a MemoryStream.
    • QrReader.Read: The IronQR method reads the QR code from the picture information.
    • ImageSource: If a QR code is located, the QR code text appears in the QrCodeResult label, and the image is shown in the QrCodeImage element.

Handling Permissions

The right authorization is needed to access the device camera. Make the required permission requests by updating the project files for iOS and Android.

Android

Access AndroidManifest.xml and include the ensuing authorizations:

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

Request permissions in the MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Platform.Init(this, savedInstanceState);
    Xamarin.Essentials.Platform.RequestPermissions(this, new string[] 
    {
        Android.Manifest.Permission.Camera,
        Android.Manifest.Permission.WriteExternalStorage,
        Android.Manifest.Permission.ReadExternalStorage
    });
}
protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Platform.Init(this, savedInstanceState);
    Xamarin.Essentials.Platform.RequestPermissions(this, new string[] 
    {
        Android.Manifest.Permission.Camera,
        Android.Manifest.Permission.WriteExternalStorage,
        Android.Manifest.Permission.ReadExternalStorage
    });
}
Protected Overrides Sub OnCreate(ByVal savedInstanceState As Bundle)
	MyBase.OnCreate(savedInstanceState)
	Platform.Init(Me, savedInstanceState)
	Xamarin.Essentials.Platform.RequestPermissions(Me, New String() { Android.Manifest.Permission.Camera, Android.Manifest.Permission.WriteExternalStorage, Android.Manifest.Permission.ReadExternalStorage })
End Sub
VB   C#

Below is the output generated from a Windows machine environment.

How to use .NET MAUI For QR Code scanner: Figure 5 - Click Scan QR code

After scanning, the completed result will be displayed on the label.

How to use .NET MAUI For QR Code scanner: Figure 6 - Example output from using IronQR to scan the QR code

Conclusion

Using .NET MAUI and IronQR to create a .NET MAUI QR code scanner is a simple process that can greatly improve the functionality of your mobile apps. IronQR's strong functionality for processing QR codes and .NET MAUI's cross-platform capabilities allow you to construct effective and reliable QR code scanners for Windows, iOS, macOS, and Android.

IronQR and .NET MAUI together offer a smooth development process that lets you concentrate on creating cutting-edge features and producing top-notch applications. This tutorial offers a strong basis to get you started, regardless of whether you are creating a straightforward QR code scanner or a sophisticated application with cutting-edge QR code features.

Consider using IronQR for your QR code requirements if you want to further streamline your development process. Even under difficult circumstances, IronQR produces crisp, scalable QR codes with strong reading capabilities. IronQR offers a solution that meets your unique needs, with customizable licensing choices catered to individual developers, small teams, and large companies. Visit Buy a license and see comprehensive pricing details, join the many developers who rely on Iron Software for their essential development tools, and elevate your applications with IronQR.

For other similar products in the Iron Software Suite, the IronBarcode stands as the counterpart to scan barcodes. With IronBarcode, you can seamlessly integrate high-performance barcode scanning functionality into your applications, making it an excellent choice for needs related to scanning barcodes.

NEXT >
How to Generate QR Codes in ASP .NET Core

Ready to get started? Version: 2024.10 just released

Free NuGet Download Total downloads: 16,538 View Licenses >