DEV Community

Cover image for Generate QR Code in .NET MAUI
Victor Hugo Garcia
Victor Hugo Garcia

Posted on • Edited on

Generate QR Code in .NET MAUI

In this article, I'm going to show you how to generate a QR code in .NET MAUI for Android and iOS without Google Vision or ZXing. This is to bring to you an alternative to generate-only QR codes without too much dependencies.


About the NuGet Package

QRCoder-ImageSharp is a simple library, written in C#.NET, which enables you to create QR codes. It was forked from the QRCoder project that is using the System.Drawing assembly.

Because of the System.Drawing assembly does not support non-Windows platforms, QRCoder-ImageSharp is using the ImageSharp assembly to support more platforms.

You can find more information here: https://www.nuget.org/packages/QRCoder-ImageSharp#readme-body-tab


Let's Start

First, we will add the following NuGet package in our .NET MAUI project:

<ItemGroup>
    <PackageReference Include="QRCoder-ImageSharp" Version="0.9.0" />
</ItemGroup>
Enter fullscreen mode Exit fullscreen mode

Then, we create a method to generate our QR Code

QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(Hello MAUI, QRCodeGenerator.ECCLevel.L);

PngByteQRCode qRCode = new PngByteQRCode(qrCodeData);
byte[] qrCodeBytes = qRCode.GetGraphic(20);
ImageSource qrImageSource = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
Enter fullscreen mode Exit fullscreen mode

The qrImageSource variable can then be assigned to an image control in .NET MAUI to display the generated QR code.

<Image
x:Name="QrCodeImage"
HeightRequest="200"
HorizontalOptions="Center"
WidthRequest="200"/>
Enter fullscreen mode Exit fullscreen mode
QrCodeImage.Source = qrImageSource;
Enter fullscreen mode Exit fullscreen mode

And that's all!


Plus Plus

It happens that you may need to share that generated QR Code as image via a social app such as Whatsapp, Facebook, Twitter, etc. Well, we can use the .NET MAUI Api to store the image in a cache folder and then share it easily.

// Right after the image is created we create a PNG image and store it on the cache of the app
var path = FileSystem.Current.CacheDirectory;
string fn = "demo-qr-code.png";
var fullPath = Path.Combine(path, fn);
await File.WriteAllBytesAsync(fullPath, qrCodeBytes);

// Then we display the share native options on each platform to share it with others
string file = Path.Combine(FileSystem.CacheDirectory, fn);

await Share.Default.RequestAsync(new ShareFileRequest
{
      Title = "Generated QR Code",
      File = new ShareFile(file)
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

Sometimes, we just need a package that helps us to do a single task. There are other libraries that offer more capabilities, however, they also requiere additional permissions and configuration. If you need a QR & Barcode scanning I highly recommend you to check out the youtube channel from our friend Gerald where you can find amazing guides about how to use either Camera.MAUI, Google Vision or ZXing libraries.

Thanks for reading! Follow me on Twitter @ivictorhugo

Top comments (2)

Collapse
 
phantomkna profile image
Phantom_KNA

Thx you!!!

Collapse
 
kdamprai profile image
KdamPrai • Edited

Hi, thank you for your tutorial but I have a problem with
"
The type or namespace name 'ImageSource' could not be found (are you missing ....).
"
Can you help me explain this?
Edit: I'm working on .Net Core 6 Web