Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generate QR code with Xamarin.Forms and Zxing

I've seen alot about this online (old posts) but nothing seems to work for me. I'm trying to generate a QR code out of a string and display it in the app.

Here's what i had in the beginning

qrCode = new ZXingBarcodeImageView
{
    BarcodeFormat = BarcodeFormat.QR_CODE,
    BarcodeOptions = new QrCodeEncodingOptions
    {
        Height  = 50,
        Width   = 50
    },
    BarcodeValue = codeValue,
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand
};

That works fine for Android but on IOS devices its not rendered at all. So after researching i tried to do it like this:

Image qrCode;

if (Device.OS == TargetPlatform.iOS)
{
    var writer = new BarcodeWriter
    {
        Format = BarcodeFormat.QR_CODE,
        Options = new ZXing.Common.EncodingOptions
        {
            Width = 50,
            Height = 50
        }
    };

    var b = writer.Write(codeValue);

    qrCode = new Image
    {
        Aspect = Aspect.AspectFill,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
        Source = ImageSource.FromStream(() =>
        {
            MemoryStream ms = new MemoryStream(b);
            ms.Position = 0;
            return ms;
        })
    };

}else{
    qrCode = new ZXingBarcodeImageView
    {
        BarcodeFormat = BarcodeFormat.QR_CODE,
        BarcodeOptions = new QrCodeEncodingOptions
        {
            Height  = 50,
            Width   = 50
        },
        BarcodeValue = codeValue,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand
    };
}

Content = new StackLayout
{
    Children = {
        header, lblExplenationText, qrCode
    },
    BackgroundColor = Color.White
};

But there is still nothing rendered at all.

ZXing.Mobile.Forms NuGet Package Version: 2.1.47 (newest)

like image 582
Aytee Avatar asked Mar 01 '17 13:03

Aytee


People also ask

How do you use Zxing in xamarin forms?

Steps to create a demo to scan barcode code 128. For using Zxing in Xamarin Forms we have to first add NuGet to both the projects, which are Android and iOS. After adding NuGet to our project in the Android project open “MainActivity. cs” and add the below code to the class. For iOS projects open AppDelegate.

How do I create a QR code in Visual Studio?

You can use any of your choice. Open Visual Studio = > Click on Create New Project = > Select Console Application Template = > Press Next => Name the Project => Press Next => Select your Target dot Net framework => Click on Create Button.


1 Answers

It seems to be a known issue.
Luckily there is a workaround, to set a HeightRequest & WidthRequest, here is a working code example:

ZXingBarcodeImageView GenerateQR(string codeValue)
{
    var qrCode = new ZXingBarcodeImageView
    {
        BarcodeFormat = BarcodeFormat.QR_CODE,
        BarcodeOptions = new QrCodeEncodingOptions
        {
            Height = 350,
            Width = 350
        },
        BarcodeValue = codeValue,
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand
    };
    // Workaround for iOS
    qrCode.WidthRequest = 350;
    qrCode.HeightRequest = 350;
    return qrCode;
}
like image 75
EvZ Avatar answered Sep 18 '22 11:09

EvZ