9

(Related) I have found here, here, and here are questions describing a related problem of ZXingBarcodeImageView rendering a blurry QR code in Xamarin Forms - but they have not lead to a solution for my problem.

The Problem

I am using ZXing to draw and display a QR Code in Xamarin forms, but the QR code it produces is blurry.

enter image description here

The reason is in the .xaml page I am setting the ZXingBarcodeImageView properties WidthRequest=300 and HeightRequest=300. This is stretching the QR code after it is drawn by the ZXing library:

<forms:ZXingBarcodeImageView 
            IsVisible="True"
            x:Name="QRCodeView"
            BarcodeFormat="QR_CODE" 
            HeightRequest="300" //Stretching Height
            WidthRequest="300"  //Stretching Width
            BarcodeValue="-1"
         />

This question's top answer suggests binding the attributes Height and Width ahead of time but no matter how I change the parameters in the BarcodeOptions array it suggests, the QR code stays the same.

How do I change to the setup dimensions of the ZXingBarcodeImageView before drawing time to avoid the stretching?

Oscar Chambers
  • 899
  • 9
  • 25

1 Answers1

11

Adding the BarcodeOptions to the ZXingBarcodeImageView in XAML seems to work in my case. The same when binding from code, as suggested in one of your linked solutions, does not work for some reason.

<ContentPage .... xmlns:zxcm="clr-namespace:ZXing.Common;assembly=zxing.portable">
<forms:ZXingBarcodeImageView 
        IsVisible="True"
        x:Name="QRCodeView"
        BarcodeFormat="QR_CODE" 
        HeightRequest="300"
        WidthRequest="300"
        BarcodeValue="-1">
        <zx:ZXingBarcodeImageView.BarcodeOptions>
            <zxcm:EncodingOptions Width="300" Height="300" />
        </zx:ZXingBarcodeImageView.BarcodeOptions>
    </forms:ZXingBarcodeImageView>
</ContentPage>

A sample project can be found here: https://github.com/jfversluis/Blurry-ZXingBarcodeImageView

Gerald Versluis
  • 30,492
  • 6
  • 73
  • 100
  • Indeed the rendering looks better now, but still a bit blurry. +1 for an improvement though I had to implement in a different way like this `BarcodeOptions="300,300"` – Oscar Chambers Jul 09 '18 at 07:46
  • 1
    ``` ``` My Xamarin doesn't have any idea about these namespaces, am I missing something? – Oscar Chambers Jul 09 '18 at 07:50
  • 1
    I just ran into the same problem while creating a sample project :) Add the ZXing.Net.Mobile package to your Android project – Gerald Versluis Jul 09 '18 at 07:51