Create QR Code in Windows 10 UWP

A year ago, I wrote an UWP application that can generate QR Code. However, at that time, the QR Code library I used was ZXing.Net, the last update for this package was in 2014.

Now, time has changed, the author of ZXing.Net seems not to update the package any more. However, we have to move on, so I found a fantastic new library to generate QR Code in .NET applications: QRCoder

To use that package, we have to install it from NuGet:

PM> Install-Package QRCoder

The core piece of code to create QR Code in UWP is:

public async Task GetQrCode()
{
    var level = SelectedEcc;
    var eccLevel = (QRCodeGenerator.ECCLevel) (level == "L" ? 0 : level == "M" ? 1 : level == "Q" ? 2 : 3);
    var qrGenerator = new QRCodeGenerator();
    var qrCodeData = qrGenerator.CreateQrCode(SourceText, eccLevel);
    var qrCode = new BitmapByteQRCode(qrCodeData);
    var qrCodeImage = qrCode.GetGraphic(20);

    using (var stream = new InMemoryRandomAccessStream())
    {
        using (var writer = new DataWriter(stream.GetOutputStreamAt(0)))
        {
            writer.WriteBytes(qrCodeImage);
            await writer.StoreAsync();
        }
        Bitmap = new WriteableBitmap(1024, 1024);
        await Bitmap.SetSourceAsync(stream);
    }
}

The ECC Mode stands for Error Correcting level, we need to define in our ViewModel:

public List<string> EccModes
{
    get
    {
        return Enum.GetValues(typeof(QRCodeGenerator.ECCLevel)).Cast<Enum>().Select(x => x.ToString()).ToList();
    }
}

private string _selectedEcc;
public string SelectedEcc
{
    get { return _selectedEcc; }
    set
    {
        _selectedEcc = value;
        RaisePropertyChanged();
    }
}

XAML UI:

<Grid Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch">
    <ComboBox Header="ECC Level" 
              HorizontalAlignment="Stretch"
          ItemsSource="{Binding Path=EccModes}" 
          SelectedItem="{Binding SelectedEcc, Mode=TwoWay}" />
</Grid>

And also, for the text used to generate QR Code:

The length of the text depends on the ECC level

private string _sourceText;
public string SourceText
{
    get { return _sourceText; }
    set
    {
        _sourceText = value;
        RaisePropertyChanged();
    }
}

XAML UI:

<TextBox Grid.Row="0" Grid.Column="0" 
         Text="{Binding SourceText, Mode=TwoWay}"
         Header="Text" 
         PlaceholderText="Enter Text" 
         Margin="0,0,10,0" 
         AcceptsReturn="True"
         TextWrapping="Wrap"
         MaxHeight="100"
         MaxLength="768" />

For displaying and saving the QR Code Image, we need to define a WriteableBitmap object:

private WriteableBitmap _bitmap;
public WriteableBitmap Bitmap
{
    get { return _bitmap; }
    set
    {
        _bitmap = value;
        RaisePropertyChanged();
    }
}

And bind it to Image Control in XAML:

<Image Source="{Binding Bitmap, Mode=TwoWay}" />

If you want to save the QR Code to file system, you can install my Edi.UWP.Helpers

It has a bitmap extension class that can save a writeable bitmap to file system.

So, the code is very simple now:

public async Task SaveToPic()
{
    try
    {
        var fileName = $"QRCODE_{DateTime.Now:yyyy-MM-dd-HHmmss}";
        var result = await Bitmap.SaveToPngImage(PickerLocationId.PicturesLibrary, fileName);
        if (result != FileUpdateStatus.Complete)
        {
            var dig = new MessageDialog($"{result}", "FAIL");
            await dig.ShowAsync();
        }
    }
    catch (Exception ex)
    {
        var dig = new MessageDialog($"{ex.Message}", "FAIL");
        await dig.ShowAsync();
    }
}