CODEWITHSUNDEEP
xamarin.formsqr-code
Rida MarLey
Rida MarLey

Reputation: 33

Show QR code in an image Xamarin.Forms

I am working in an app that READ/CREATE QR codes using ZXing.net.Mobile.Forms library , i got everything to work but for the CREATING part i want to display it as an image.

so far am just adding it to the page ( see code below )

  ZXingBarcodeImageView barcode = new ZXingBarcodeImageView();


  barcode.BarcodeFormat = BarcodeFormat.QR_CODE;
  barcode.BarcodeOptions.Width = 700;
  barcode.BarcodeOptions.Height = 700;
  barcode.BarcodeOptions.Margin = 10;
  barcode.BarcodeValue = txtQR.Text; // Text to be rendered to a QR CODE

  //StackPage name of the StackLayout
  StackPage.Children.Add(barcode);

Instead of [ StackPage.add(barcode) ];

i want something like this :

image.source = barcode;

any ideas would be appreciated

Upvotes: 3

Views: 3692

Answers (1)

Wilson Vargas
Wilson Vargas

Reputation: 2899

How Jason says ZXingBarcodeImageView inherits from Image, so it is itself an Image. So you should add it into a View. First, create a View in another file like this:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
 x:Class="QRManager.Views.QRResult">
    <ContentView.Content>
    </ContentView.Content>
</ContentView>

Now, in your MainPage add this View using xmlns:local for your namespace :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:QRManager.Views;assembly=QRManager"
         x:Class="QRManager.Views.QRGeneratorPage"
         Title="Generator Page">
    <ScrollView>
        <StackLayout Padding="10">
            <StackLayout>
                <Entry x:Name="contentEntry" TextColor="Black"
                   Placeholder="Texto" PlaceholderColor="Silver" 
                   Keyboard="Text" FontSize="18" HorizontalTextAlignment="Start"/>
                <Button Text="Generar QR" HorizontalOptions="FillAndExpand" BackgroundColor="#2196F3" TextColor="White" Clicked="Button_Clicked"/>
            </StackLayout>
            <local:QRResult x:Name="qrResult" />
        </StackLayout>
    </ScrollView>
</ContentPage>

Finally in you code behind set your View with ZXingBarcodeImageView like this:

private void Button_Clicked(object sender, EventArgs e)
{
    try
    {
         if (contentEntry.Text != string.Empty)
         {
             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();
////////// SEE HERE //////////
             qrResult.Content = barcode;
         }
            else
            {
                DisplayAlert("Alert", "Introduzca el valor que desea convertir código QR", "OK");
            }
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex.ToString());
            DisplayAlert("Alert", "Introduzca el valor que desea convertir código QR", "OK");
        }
}

For more information see this repository with a sample.

Upvotes: 2

Related Questions