ZXingBarcodeImageView rendering aspect ration on iOS virtual device

Question

I am trying to generate and display barcode in Xamarin forms using following code.

barcode = new ZXingBarcodeImageView
{
    HeightRequest = 400,
    WidthRequest = 400
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 400;
barcode.BarcodeOptions.Height = 400;
barcode.BarcodeOptions.Margin = 10;
barcode.BarcodeValue = "ZXing.Net.Mobile";

Content = barcode;

The QR code is rendered fine in Android virtual device. On the other hand, in iOS device, a distorted QR code is rendered. The aspect ration of QR code rendered on iOS virtual device is not square as it supposed to be.

The QR code rendered on Android virtual device is verified using a mobile phone.

Edit: Tried the following code as suggested by @wilson

        try
        {
            barcode = new ZXingBarcodeImageView
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
            };
            barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
            barcode.BarcodeOptions.Width = 500;
            barcode.BarcodeOptions.Height = 500;
            barcode.BarcodeOptions.Margin = 10;
            barcode.BarcodeValue = "ZXing.Net.Mobile";

            Content = barcode;

        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.ToString());
        }

Still, I see the same problem. When I tried the example code of @wilson and it works fine on iPhone simulator. Probably I should use content view as suggested.

Edit 2 I tried the stack layout as shown below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AZCommute"
             x:Class="AZCommute.MainPage">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="QR Code Generator" HorizontalOptions="Center"/>
        <local:QRResult x:Name="qrResult"/>
    </StackLayout>
</ContentPage>

But, it was of no help. Nothing rendered on iOS. I tried by adding WidthRequest and HeightRequest while initializing the ZXingBarcodeImageView as shown below.

HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
WidthRequest = 410,
HeightRequest = 410,

Now, ZXingBarcodeImageView renders in iPhone simulator. But, the aspect ratio is lost (height > width ). Note: I am using the ContentView with StackLayout

score 0 · Answer 1 · answered Sep 28 '17 at 18:06

0

Try assigning the HorizontalOptions property like this:

barcode = new ZXingBarcodeImageView
{
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 500;
barcode.BarcodeOptions.Height = 500;
barcode.BarcodeValue = contentEntry.Text.Trim();
Content = barcode;

Or try creating a ContentView to show QRCode.

For more information see my example.

answered Sep 28 '17 at 18:06

Wilson Vargas

2,841
1
19
28

I did try the above code. Still same problem. Thank you very your example. It worked fine. I will refactor my code to `ContentView` and try again. – gv1507 Sep 29 '17 at 01:47
I refactored the code to use `ContentView`. I have tested the code across Android, Windows(UWP) and iOS. It works fine on Android and UWP. But, nothing is rendered on iOS simulator. – gv1507 Sep 29 '17 at 02:22
I am initializing ZXing forms using `ZXing.Net.Mobile.Forms.iOS.Platform.Init();` – gv1507 Sep 29 '17 at 02:23

score 0 · Answer 2 · answered Sep 29 '17 at 11:49

Try to put inside a StackLayout :)

        barcode = new ZXingBarcodeImageView
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
        };

        barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
        barcode.BarcodeOptions.Width = 500;
        barcode.BarcodeOptions.Height = 500;
        barcode.BarcodeOptions.Margin = 10;
        barcode.BarcodeValue = "ZXing.Net.Mobile";

        Content = new StackLayout{
        HorizontalOptions = LayoutOptions.CenterAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand,

            Children = {
            barcode
            }
        };

I did try `StackLayout` earlier. Still, the aspect ratio is lost. I have updated my question. — gv1507, Sep 29 '17 at 12:38

ZXingBarcodeImageView rendering aspect ration on iOS virtual device

2 Answers2