HowTo: ZXing.Net.Mobile with PRISM

Hy,

i want to integrate Barcode Scanning inn my App using Prism.

private async void Scan()
{
var options = new MobileBarcodeScanningOptions
{
AutoRotate = true,
UseFrontCameraIfAvailable = false,
TryHarder = true,
PossibleFormats = new List<ZXing.BarcodeFormat> { ZXing.BarcodeFormat.CODE_128 }
};

var scanPage = new ZXingScannerPage(options)
{
    DefaultOverlayTopText = "Align the barcode within the frame",
    DefaultOverlayBottomText = string.Empty,
    DefaultOverlayShowFlashButton = true
};
await Navigation.PushAsync((scanPage);

scanPage.OnScanResult += (result) =>
{
    // Stop scanning
    scanPage.IsScanning = false;

    // Pop the page and show the result
    Device.BeginInvokeOnMainThread(async () =>
    {
        await NavigationService.GoBackAsync();
        await _dialogService.DisplayAlertAsync("Barcode Scanned", result.Text, "OK");
    });
};

}

My problem is the line

await Navigation.PushAsync((scanPage);

I do not have access to Navigation on PRISM and the PRISM NavigationService wont take a page as parameter.

Has anyone solved this issue?

Thank you

Best Answer

  • KristianRichterKristianRichter US ✭✭
    Accepted Answer

    Solved it...

    using the view is the key


    <Grid.RowDefinitions>


    </Grid.RowDefinitions>

        <forms:ZXingScannerView Grid.Column="0" Grid.Row="0"
                                HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"
                                IsScanning="{Binding IsScanning}" 
                                IsAnalyzing="{Binding IsAnalyzing}" 
                                Result="{Binding Result, Mode=TwoWay}"
                                ScanResultCommand="{Binding QRScanResultCommand}" />
    
        <forms:ZXingDefaultOverlay Grid.Column="0" Grid.Row="0"
                                   TopText="{Binding TopText}" 
                                   ShowFlashButton="False"
                                   BottomText="{Binding BottomText}" 
                                   Opacity="0.9" />
    
    </Grid>
    

Answers

  • KristianRichterKristianRichter USMember ✭✭
    Accepted Answer

    Solved it...

    using the view is the key


    <Grid.RowDefinitions>


    </Grid.RowDefinitions>

        <forms:ZXingScannerView Grid.Column="0" Grid.Row="0"
                                HorizontalOptions="EndAndExpand" VerticalOptions="FillAndExpand"
                                IsScanning="{Binding IsScanning}" 
                                IsAnalyzing="{Binding IsAnalyzing}" 
                                Result="{Binding Result, Mode=TwoWay}"
                                ScanResultCommand="{Binding QRScanResultCommand}" />
    
        <forms:ZXingDefaultOverlay Grid.Column="0" Grid.Row="0"
                                   TopText="{Binding TopText}" 
                                   ShowFlashButton="False"
                                   BottomText="{Binding BottomText}" 
                                   Opacity="0.9" />
    
    </Grid>
    
  • rfzh1996rfzh1996 USMember ✭✭

    Hey how is your ViewModel Code? i trying make it work but i cant :(~~~~

  • KristianRichterKristianRichter USMember ✭✭

    View:

    View.cs:
    public BarcodePage()
    : base()
    {
    InitializeComponent();

            overlay.BindingContext = ((PageViewModel)this.BindingContext);
        }
    
        public void FlashButtonClicked(object sender, EventArgs e)
        {
            scanner.ToggleTorch();
        }
    

    PageViewModel:

        private bool cameraFlashLightOn = false;        
        private bool _isAnalyzing = true;        
        private bool _isScanning = true;
        private bool _flashButtonVisible;
        private string _topText = "Text";
        private string _bottomText = "Text";
    
        ZXingScannerView _zxing = new ZXingScannerView();
    
        public string TopText
        {
            get { return _topText; }
            set { SetProperty(ref _topText, value); }
        }
    
        public string BottomText
        {
            get { return _bottomText; }
            set { SetProperty(ref _bottomText, value); }
        }
    
        public bool ShowFlashButton
        {
            get { return _flashButtonVisible; }
            set
            {
                if (!bool.Equals(_flashButtonVisible, value))
                {
                    this._flashButtonVisible = value;
                    SetProperty(ref _flashButtonVisible, value);
                }
            }
        }
    
        public ZXing.Result Result { get; set; }
    
        public bool IsAnalyzing
        {
            get { return this._isAnalyzing; }
            set
            {
                if (!bool.Equals(_isAnalyzing, value))
                {
                    _isAnalyzing = value;
                    SetProperty(ref _isAnalyzing, value);
                }
            }
        }
    
        public bool IsScanning
        {
            get { return _isScanning; }
            set
            {
                if (!bool.Equals(_isScanning, value))
                {
                    this._isScanning = value;
                    SetProperty(ref _isScanning, value);
                }
            }
        }
    
        public Command QRScanResultCommand => new Command(() =>
        {
            IsAnalyzing = false;
            IsScanning = false;
    
            Device.BeginInvokeOnMainThread(async () =>
            {
                // Stop analysis until we navigate away so we don't keep reading barcodes
                IsAnalyzing = false;
    
        // do something with Result.Text
    
    
                await NavigationService.GoBackAsync();
            });
        });
    
        public PageViewModel()
        {
            ShowFlashButton = true;
        }
    
  • tuyenvtuyenv VNUniversity ✭✭✭

    For ones might interest, I have built a small app using Zxing with Prism with my mood of organizing code.

    Plz check it out here.

    Cheers.

  • kimmiekimmie PHMember
    edited February 4

    You can create an extension of ZXingScannerPage this way you can also create its view model. Just pass the scan result via navigation parameters back to your main page.

Sign In or Register to comment.