HowTo: ZXing.Net.Mobile with PRISM

Hy,

i want to integrate Barcode Scanning inn my App using Prism.
<br /> private async void Scan()<br /> {<br /> var options = new MobileBarcodeScanningOptions<br /> {<br /> AutoRotate = true,<br /> UseFrontCameraIfAvailable = false,<br /> TryHarder = true,<br /> PossibleFormats = new List&lt;ZXing.BarcodeFormat> { ZXing.BarcodeFormat.CODE_128 }<br /> };</p> <pre><code>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
<br /> await Navigation.PushAsync((scanPage);<br />
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.

Sign In or Register to comment.