Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin Forms, ZXingBarcodeImageView is blurry

(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?

like image 359
Oscar Chambers Avatar asked Jul 09 '18 06:07

Oscar Chambers


1 Answers

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

like image 146
Gerald Versluis Avatar answered Oct 04 '22 18:10

Gerald Versluis