Test in production without watermarks.
Works wherever you need it to.
Get 30 days of fully functional product.
Have it up and running in minutes.
Full access to our support engineering team during your product trial
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.
.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.
CreateQrCode
method to generate a QR code from a stringToJpegBinaryData
methodIronBarcode 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.
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:
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:
In the "Enable Developer Mode for Windows" dialog box displayed by Visual Studio, locate the link labeled "settings for developers."
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.
To install IronBarcode, open the NuGet Package Manager Console. To open the Package Manager Console in Visual Studio, you can follow these steps:
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 in the Package Manager Console to install IronBarcode.
Install-Package BarCode
This will add the IronBarcode library to your project and make it available for use.
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>
: Displays 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>
: Provides 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>
: Displays 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>
: 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. 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)
{
// Get the text from the entry field
string text = qrCodeText.Text;
// Generate the QR code using the IronBarcode library
var qrCode = QRCodeWriter.CreateQrCode(text);
// Convert the QR code to binary JPEG data
var qrCodeBytes = qrCode.ToJpegBinaryData();
// Set the QR code image source to display the generated QR code on the UI
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)
{
// Get the text from the entry field
string text = qrCodeText.Text;
// Generate the QR code using the IronBarcode library
var qrCode = QRCodeWriter.CreateQrCode(text);
// Convert the QR code to binary JPEG data
var qrCodeBytes = qrCode.ToJpegBinaryData();
// Set the QR code image source to display the generated QR code on the UI
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)
' Get the text from the entry field
Dim text As String = qrCodeText.Text
' Generate the QR code using the IronBarcode library
Dim qrCode = QRCodeWriter.CreateQrCode(text)
' Convert the QR code to binary JPEG data
Dim qrCodeBytes = qrCode.ToJpegBinaryData()
' Set the QR code image source to display the generated QR code on the UI
qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub
End Class
End Namespace
Here is the code explanation.
OnButtonClicked
method is an event handler for a button's click event. When the button is clicked, this method is executed.OnButtonClicked
method, the text contained in the qrCodeText
entry field is assigned to the text variable.QRCodeWriter.CreateQrCode(text)
is used to create a QR code based on the entered text.qrCode.ToJpegBinaryData()
converts the QR code into binary JPEG data.qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes))
sets the source of the qrCodeImage
control to display the generated QR code image.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 and press on Generate QR Code Button. QR Code will be generated and displayed on the screen as shown below.
Now, we have developed a 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)
{
// Get the text from the entry field
string text = qrCodeText.Text;
// Generate the QR code using the IronBarcode library
var qrCode = QRCodeWriter.CreateQrCode(text);
// Add the text of the QR code value below the generated barcode
qrCode.AddBarcodeValueTextBelowBarcode();
// Add an annotation text above the barcode
qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
// Convert the QR code to binary JPEG data
var qrCodeBytes = qrCode.ToJpegBinaryData();
// Set the QR code image source to display the generated QR code on the UI
qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}
private void OnButtonClicked(object sender, EventArgs e)
{
// Get the text from the entry field
string text = qrCodeText.Text;
// Generate the QR code using the IronBarcode library
var qrCode = QRCodeWriter.CreateQrCode(text);
// Add the text of the QR code value below the generated barcode
qrCode.AddBarcodeValueTextBelowBarcode();
// Add an annotation text above the barcode
qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
// Convert the QR code to binary JPEG data
var qrCodeBytes = qrCode.ToJpegBinaryData();
// Set the QR code image source to display the generated QR code on the UI
qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}
Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
' Get the text from the entry field
Dim text As String = qrCodeText.Text
' Generate the QR code using the IronBarcode library
Dim qrCode = QRCodeWriter.CreateQrCode(text)
' Add the text of the QR code value below the generated barcode
qrCode.AddBarcodeValueTextBelowBarcode()
' Add an annotation text above the barcode
qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
' Convert the QR code to binary JPEG data
Dim qrCodeBytes = qrCode.ToJpegBinaryData()
' Set the QR code image source to display the generated QR code on the UI
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
method, 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.
You may also create a .NET MAUI Barcode generator with the help of the IronBarcode library. You just need to change a little in the code, and you are good to go as shown in the following code sample.
private void OnButtonClicked(object sender, EventArgs e)
{
// Get the text from the entry field
string text = barCodeText.Text;
// Generate the barcode using the IronBarcode library with Code128 encoding
var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
// Add the text of the barcode value below the generated barcode
barCode.AddBarcodeValueTextBelowBarcode();
// Add an annotation text above the barcode
barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");
// Convert the barcode to binary JPEG data
var qrCodeBytes = barCode.ToJpegBinaryData();
// Set the barcode image source to display the generated barcode on the UI
barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}
private void OnButtonClicked(object sender, EventArgs e)
{
// Get the text from the entry field
string text = barCodeText.Text;
// Generate the barcode using the IronBarcode library with Code128 encoding
var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
// Add the text of the barcode value below the generated barcode
barCode.AddBarcodeValueTextBelowBarcode();
// Add an annotation text above the barcode
barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");
// Convert the barcode to binary JPEG data
var qrCodeBytes = barCode.ToJpegBinaryData();
// Set the barcode image source to display the generated barcode on the UI
barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}
Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
' Get the text from the entry field
Dim text As String = barCodeText.Text
' Generate the barcode using the IronBarcode library with Code128 encoding
Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
' Add the text of the barcode value below the generated barcode
barCode.AddBarcodeValueTextBelowBarcode()
' Add an annotation text above the barcode
barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App")
' Convert the barcode to binary JPEG data
Dim qrCodeBytes = barCode.ToJpegBinaryData()
' Set the barcode image source to display the generated barcode on the UI
barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub
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.
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.
.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. It supports Android, iOS, macOS, Windows, and more.
To generate a QR code in .NET MAUI, use the IronBarcode library. First, download it from NuGet, configure the MAUI user interface, and use the CreateQrCode method from IronBarcode to generate a QR code from a string.
IronBarcode is a powerful library for generating barcodes and QR codes in .NET applications. It offers customizable settings such as size, error correction, and encoding options.
To set up a .NET MAUI project, open Visual Studio 2022, create a new project, search for the MAUI template, select .NET MAUI App Template, and follow the setup instructions to configure the project.
Use the QRCodeWriter.CreateQrCode method from IronBarcode to generate the QR code, convert it to binary data using ToJpegBinaryData, and display it on the UI with an Image control in .NET MAUI.
You can add annotations to a QR code by using the methods AddBarcodeValueTextBelowBarcode and AddAnnotationTextAboveBarcode from the IronBarcode library to add text annotations above and below the QR code.
IronBarcode is free for development purposes and offers a free trial. For commercial use, different pricing plans and licensing options are available.
Yes, you can create a barcode generator using .NET MAUI and IronBarcode by modifying the QR code generation code to use the BarcodeWriter.CreateBarcode method with the desired encoding.