How do I use ZXing.Net scanner in Xamarin forms alongside other UI elements?

Question

I'm looking at the sample for ZXing.net for Xamarin.Forms and it's using a code only approach to scanning the barcode.

I used this question as inspiration to get the following code, but I'm not entirely sure how to manage the scan event while using Prism.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:zx="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             xmlns:zxcm="clr-namespace:ZXing.Common;assembly=zxing.portable"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WebOfTrust.Views.Client.MyPeople.ScanNewOrUpdateContact">
    <ContentPage.Content>
        <StackLayout>


            <zx:ZXingDefaultOverlay
                TopText= " Hold your phone up to the barcode"
                BottomText=" Scanning will being automatically">
            </zx:ZXingDefaultOverlay>


            <!--     BarcodeValue="{Binding QrCode}"    -->
            <zx:ZXingScannerView
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"> 
            </zx:ZXingScannerView>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

My question is, how do I design a page so that I can catch the OnScanResult as demonstrated in the sample (copied below)

        zxing.OnScanResult += (result) => 
            Device.BeginInvokeOnMainThread (async () => {

                // Stop analysis until we navigate away so we don't keep reading barcodes
                zxing.IsAnalyzing = false;

                // Show an alert
                await DisplayAlert ("Scanned Barcode", result.Text, "OK");

                // Navigate away
                await Navigation.PopAsync ();
            });

what **specifically** are you having problems with? Is it building the UI? Or wiring up the events with PRISM instead of using event handlers in the code-behind? Or something else entirely? — Jason, Oct 02 '18 at 22:14
I don't know how to get the ViewModel to listen to the OnScanResult preferrably declared in Xaml @Jason — TLDR, Oct 02 '18 at 22:29
instead of OnScanResult, use ScanResultCommand to bind it to a command in your VM — Jason, Oct 02 '18 at 22:31

score 2 · Answer 1 · answered Oct 03 '18 at 09:21

Refer to the following code:

in xaml

<zx:ZXingScannerView
    x:Name="zxing"
    IsAnalyzing="{Binding IsAnalyzing,Mode=TwoWay}" 
    Result="{Binding Result, Mode=TwoWay}"
    ScanResultCommand="{Binding ScanResultCommand}"                
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"> 
</zx:ZXingScannerView>

in ViewModel

public ZXing.Result Result { get; set; }

public bool IsAnalyzing { get;set }

public Command ScanResultCommand
{
   get
    {
       return new Command(() =>
        {

          Device.BeginInvokeOnMainThread(async () =>
            {
              IsAnalyzing = false;

              Console.WriteLine(Result.Text);

              //...

             });
            });
     }
}

This worked perfect for me ;) It triggers a ScanResult every second though ^^ — Ashallar, Oct 22 '20 at 19:31

How do I use ZXing.Net scanner in Xamarin forms alongside other UI elements?

1 Answers1