.Net MAUI - QR Code Generator

.NET MAUI is a powerful platform for building cross-platform mobile applications, and with the right tools and resources, it's easy to add barcode scanning functionality to your app. In this tutorial, we'll walk you through implementing a QR Code Generator in .NET MAUI using the Codebude - QR Coder plugin.

Project Setup

To create .NET MAUI apps, we need the latest Visual Studio 2022 installed with .NET Multi-platform App UI development workload with its default optional installation options in our PC or mac machine.

Launch Visual Studio 2022, and click "Create a new project" in the start window.

In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button.

In the Configure your new project window, name your project, choose a suitable location, and click the Next button.

In the Additional information window, click the Create button,

Once the project is created, we can see the Android, iOS, Windows, and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation

QRCoder is a simple library written in C#.NET, which enables you to create QR codes. First, we must add the QR Coder library to our project as a dependency. To do this, open the NuGet Package Manager and search for "QRCoder". Install the package in your .NET MAUI project.

Install QRCoder

Install the QRCoder NuGet package on your .NET MAUI application.

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(InputText.Text, QRCodeGenerator.ECCLevel.L);
PngByteQRCode qRCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeBytes = qRCode.GetGraphic(20);
QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));

The above lines only need to generate the QR code for your mobile application.

How to change the color of your QR code

The GetGraphics-method has some more overloads. The first two enable you to set the color of the QR code graphic. One uses Color-class-types, and the other uses HTML hex color notation.

//Set color by using Color-class types
Bitmap qrCodeImage = qrCode.GetGraphic(20, Color.DarkRed, Color.PaleGreen, true);

//Set color by using HTML hex color notation
Bitmap qrCodeImage = qrCode.GetGraphic(20, "#000ff0", "#0ff000");

Full Code of MainPage

<?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="MauiQRCodeGenerator.MainPage"
             Title="QR Code Generator"
             BackgroundColor="White">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="10" 
            Padding="30" 
            HorizontalOptions="FillAndExpand"
            VerticalOptions="Center">

            <Label 
                Text="Enter Data"
                SemanticProperties.HeadingLevel="Level1"
                SemanticProperties.Description="Enter Data"
                FontSize="18"
                HorizontalOptions="FillAndExpand" />

            <Frame BorderColor="LightSlateGray"
                   Padding="10,0">
                <Entry
                x:Name="InputText"
                Text=""
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Enter data here..."
                FontSize="18"
                HorizontalOptions="FillAndExpand" />
            </Frame>

            <Button 
                x:Name="GenerateBtn"
                Text="CLICK ME"
                SemanticProperties.Hint="Generate the QR code when you click"
                Clicked="OnGenerateClicked"
                HorizontalOptions="FillAndExpand" />
            <Frame BorderColor="LightSlateGray"
                   BackgroundColor="White"
                   Padding="10">
                <Image
                x:Name="QrCodeImage"
                HeightRequest="200"
                WidthRequest="200"/>
            </Frame>
        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

using QRCoder;

namespace MauiQRCodeGenerator;

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

	private void OnGenerateClicked(object sender, EventArgs e)
	{
        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCodeData qrCodeData = qrGenerator.CreateQrCode(InputText.Text, QRCodeGenerator.ECCLevel.L);
        PngByteQRCode qRCode = new PngByteQRCode(qrCodeData);
        byte[] qrCodeBytes = qRCode.GetGraphic(20);
        QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }
}

Demo

Download Code

You can download the code from GitHub. If you liked this article and it is helpful to you, do like, share the article & star the repository on GitHub. If you have any doubts, feel free to post a comment.