Как добавить пользовательское наложение для ZXingScannerView в формах Xamarin с использованием шаблона MVVM? - PullRequest
Новая
       26

Как добавить пользовательское наложение для ZXingScannerView в формах Xamarin с использованием шаблона MVVM?

0 голосов
/ 17 мая 2019

Я потратил некоторое время на получение примеров в других местах SO, чтобы заставить представление Zxing Scanner работать с ViewModel.Я могу запустить событие сканирования, но все визуальные эффекты исчезли.Сейчас я пытаюсь добавить пользовательское наложение вокруг вида сканера, чтобы снова добавить визуальные эффекты, но они выглядят немного сумасшедшими.

Я собираюсь сделать так, чтобы весь экран отображал изображение камеры с наложенными изображениями, «наложенными» поверх.

Классы ниже:

ScanningView.xaml 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RMAGo.Features.Scanning.ScanningView"             
             xmlns:viewModelBase="clr-namespace:RMAGo.Framework;assembly=RMAGo" 
             viewModelBase:ViewModelLocator.AutoWireViewModel="true"
             xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             Title="Scanning">   


            <zxing:ZXingDefaultOverlay                                
                x:Name="scannerOverlay"                                                       
                BottomText="Place the red line over the barcode you'd like to scan.">

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

            </zxing:ZXingDefaultOverlay> 
</ContentPage>

ScanningViewModel.cs 

using RMAGo.Features.Common;
using RMAGo.Features.Navigation;
using RMAGo.Features.Settings;
using RMAGo.Framework;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using ZXing;
using ZXing.Mobile;
using ZXing.Net.Mobile.Forms;

namespace RMAGo.Features.Scanning
{
    public class ScanningViewModel : ViewModelBase
    {
        private readonly IRMAApiService _rmaApiService;
        private readonly ISettingsService _settingsService;
        private readonly IDialogService _dialogService;
        private readonly INavigationService _navigationService;

        private string barcode = string.Empty;
        public string Barcode
        {
            get
            {
                return barcode;
            }
            set
            {
                barcode = value;
            }
        }       

        private bool _isAnalyzing = true;
        public bool IsAnalyzing
        {
            get { return _isAnalyzing; }
            set
            {
                if (!Equals(_isAnalyzing, value))
                {
                    _isAnalyzing = value;
                }
            }
        }        

        private bool _isScanning = true;
        public bool IsScanning
        {
            get { return _isScanning; }
            set
            {
                if (!Equals(_isScanning, value))
                {
                    _isScanning = value;
                }
            }
        }       

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

                {
                    IsAnalyzing = false;
                    IsScanning = false;

                    Device.BeginInvokeOnMainThread(async () =>
                    {
                        Barcode = Result.Text;
                        await _dialogService.ShowAlertAsync("Scanned Item", Result.Text, "Ok");
                    });

                    IsAnalyzing = true;
                    IsScanning = true;
                });               
            }
        }
        public Result Result { get; set; }        
        public ScanningViewModel(IRMAApiService rmaApiService, ISettingsService settingsService, IDialogService dialogService, INavigationService navigationService)
        {
            _rmaApiService = rmaApiService;
            _settingsService = settingsService;
            _dialogService = dialogService;
            _navigationService = navigationService;


            PropertyChanged += ScanningViewModel_PropertyChanged;
        }

        private void ScanningViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {           
        }
    }
}

Снимок экрана результатов

1 Ответ

0 голосов
/ 17 мая 2019

Обновление: я нашел свое решение.Я увидел этот пример файла на github, который добавил оверлей и просмотр сканирования к сетке непосредственно как дочерние: https://github.com/Redth/ZXing.Net.Mobile/blob/master/Samples/Forms/Core/CustomScanPage.cs

Однажды я увидел, что в основном следовал тому же подходу, но в xaml.(Примечание: я застрял на некоторое время, потому что я перечислял Наложение и ТОГДА вид сканера. Порядок имеет значение, потому что я предполагаю, что каждый выкладывается поверх другого, поэтому наложение должно стоять на втором месте, чтобы быть последним написаннымсверху)

ScanningView.xaml 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="RMAGo.Features.Scanning.ScanningView"             
             xmlns:viewModelBase="clr-namespace:RMAGo.Framework;assembly=RMAGo" 
             viewModelBase:ViewModelLocator.AutoWireViewModel="true"
             xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
             Title="Scanning">   



    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <zxing:ZXingScannerView                                      
                    IsScanning="{Binding IsScanning}" 
                    IsAnalyzing="{Binding IsAnalyzing}"
                    Result="{Binding Result, Mode=TwoWay}" 
                    ScanResultCommand="{Binding ScanCommand}" />    
         <zxing:ZXingDefaultOverlay               
                x:Name="scannerOverlay"                                                       
                BottomText="Place the red line over the barcode you'd like to scan." />            

    </Grid>   

</ContentPage>
...