How to Generate QR Code in .NET MAUI

In this article, we will explore how to create a QR code generator using .NET MAUI, a modern framework for building cross-platform applications. We will leverage the IronBarcode library to generate QR codes and display them on the screen.

What is .NET MAUI?

.NET MAUI (Multi-platform App UI) is an evolution of the Xamarin Forms framework that allows developers to build native user interfaces for multiple platforms using a single codebase. With .NET MAUI, you can create Android, iOS, macOS, Windows, and more apps, reducing development time and effort.

Introducing IronBarcode

IronBarcode is a powerful barcode and QR code generation library for .NET applications. It provides an easy-to-use API for creating various types of barcodes, including QR codes, with customizable settings such as size, error correction, and encoding options.

Setting Up .NET MAUI Project

To get started, we need to create a new .NET MAUI project in Microsoft Visual Studio 2022. You may also use Microsoft Visual Studio Code, but the steps will vary. However, it is recommended to use Visual Studio. Follow the following steps to create the project.

Open Visual Studio 2022. The following screen will appear as shown below.

Click on Create a New Project and Search for the MAUI template as shown below.

Select .NET MAUI App Template and click on the Next Button. The following window will appear.

Name your project, select the location, and click on the Next Button, the following window will appear as shown below.

Select .NET Framework. I have selected .NET 7, you may also select .NET 6.0. The project will be created as shown below.

This tutorial primarily focuses on the initial deployment of a .NET MAUI application to a local Windows machine. You may configure it on Android or iOS simulator as per your requirement with the same code base.

To deploy a .NET MAUI application to your local Windows machine, you can follow these steps using Visual Studio:

1. Make sure that the debug target is set to "Windows Machine." If it's not, select "Windows Machine" from the dropdown in the toolbar.

2. Click on the "Start Debugging" button or press F5 to build and run the application on your Windows machine.

   

If Developer Mode is not enabled on your Windows machine, Visual Studio will prompt you to enable it. To do this, follow these steps:

1. In the "Enable Developer Mode for Windows" dialog box displayed by Visual Studio, locate the link labeled "settings for developers."

   

2. Click on the "settings for developers" link. This will open the Settings app on your Windows machine.

3. Turn on the toggle under Developer Mode as shown below.

   

Run the Project once developer mode is on. The following window will appear:

This is the template application that is automatically created by Visual Studio 2022 on creating the project. Now we will install IronBarcode and change the code as per our requirement.

Install IronBarcode

To install IronBarcode, open the NuGet Package Manager Console. To open the Package Manager Console in Visual Studio, you can follow these steps:

1. Launch Visual Studio on your Windows machine.
2. Open the project you want to work with or create a new project.
3. In the Visual Studio menu, go to "Tools".
4. From the dropdown menu, click on "NuGet Package Manager".
5. Another dropdown menu will appear, and you should select "Package Manager Console".

The Package Manager Console window will open, providing you with a command-line interface for managing NuGet packages in your project. Write the following command Package Manager Console.

:PackageInstall

This will add the IronBarcode library to your project and make it available for use.

.NET MAUI QR Code Generator using IronBarcode

Now, Let's write the code to create our own QR Code Generator mobile application. To display the generated QR code on the screen, we will leverage the capabilities of .NET MAUI. Open the MainPage.xaml file and replace it with the following code.

<?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="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

<?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="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

The above XAML code represents a .NET MAUI page that generates QR codes. Here's a simple explanation of .NET MAUI components:

• <Label>: The purpose of the <Label> component is to display text on the screen. In this application, it is used to show a welcome message and a heading to provide information and instructions to the user.
• <Entry>: The <Entry> component is used to provide a text input field for the user. In this application, it allows the user to enter the content they want to encode into a QR code.
• <Image>: The <Image> component is used to display an image on the screen. In this application, it is used to show the generated QR code image to the user after they click the generate button.
• <Button>: The <Button> component represents a clickable button. It allows the user to trigger an action when clicked. In this application, the button is used to initiate the generation of the QR code based on the content entered by the user in the <Entry> field.

These components together create an interface where the user can enter text, click a button, and see the corresponding QR code displayed on the screen.

Now, Let's write the backend code for generating QR Code. Now, open the MainPage.xaml.cs file and update the code-behind class as follows:

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI

	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			Dim text As String = qrCodeText.Text
			Dim qrCode = QRCodeWriter.CreateQrCode(text)
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

Here is the code explanation.

1. The OnButtonClicked method is an event handler for a button's click event. When the button is clicked, this method is executed.
2. Inside the OnButtonClicked method, the text contained in the qrCodeText entry field is assigned to the text variable.
3. QRCodeWriter.CreateQrCode(text) is used to create a QR code based on the entered text.
4. qrCode.ToJpegBinaryData() converts the QR code into binary JPEG data.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) sets the source of the qrCodeImage control to display the generated QR code image.

Run the .NET MAUI Application

Let's run the project to test the functionality. Press F5 to run the application on the Windows machine. The following screen will appear on running the project.

Enter the text you want to encode in the text file and press on Generate QR Code Button. QR Code will be generated and displayed on the screen as shown below.

Add Annotation and QR Code Value

Now, we have developed QR Code Generator with basic functionalities. Let's make it more functional by adding QR Code Annotation and QR Code value to our QR Code. Alter the OnButtonClicked method as shown in the following source code.

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim text As String = qrCodeText.Text
	Dim qrCode = QRCodeWriter.CreateQrCode(text)
	qrCode.AddBarcodeValueTextBelowBarcode()
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

• qrCode.AddBarcodeValueTextBelowBarcode() adds the text of the QR code value below the generated barcode.
• qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App") adds an annotation text above the barcode, specifying that it was generated by a .NET MAUI app.

Visual Studio 2022 provides a Hot reload option for .NET MAUI App. After changing the OnButtonClicked, you may click on Hot reload, and changes will appear, you may not need to close and rebuild the application.

Enter the text you want to encode and press on Generate QR Code Button. The QR Code will be generated as shown below.

IronBarcode provides other useful functionality such as adding images, coloring and resizing the QR code, etc. For more detailed tutorials and code examples, you may refer to their official documentation.

.NET MAUI Barcode Generator

You may also create a .NET MAUI Barcode generator with the help of the IronBarcode library. You just need to change a little in a code, and we are good to go as shown in the following code sample.

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
		Dim text As String = barCodeText.Text
		Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
		barCode.AddBarcodeValueTextBelowBarcode()
		barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
		Dim qrCodeBytes = barCode.ToJpegBinaryData()
		barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Output

In addition to learning how to create a QR code generator using .NET MAUI and the IronBarcode library, it's worth mentioning the pricing aspect of IronBarcode.

IronBarcode is free for development and offers a free trial and different pricing plans to suit various needs for commercial purposes. The pricing is based on licensing options, which include perpetual licenses for on-premises deployment as well as subscription-based licenses for cloud-based deployments.

Conclusion

In this article, we learned how to create a QR code generator and Barcode Generator using .NET MAUI and the IronBarcode library. We explored the steps to install IronBarcode, Create QR codes, and display them on the screen using .NET MAUI's image control.

.NET MAUI provides a powerful framework for building cross-platform applications, and IronBarcode simplifies the process of generating barcodes and QR codes. By combining these technologies, you can create versatile and efficient applications that leverage the capabilities of modern devices.