zxing qr/barcode scanning using MVVM? - xamarin

Question

Im new in xamarin, Im trying to make a Button that opens a scanner form that scans qr/barcode that is MVVM method. Im trying to get the result and display it into a label. this is my best guest but it doesn't work, hope someone can help.
view:
<StackLayout>
<Label Text="{Binding CodigoQr}"/>
<zxing:ZXingScannerView x:Name="ucZXingScannerView"
IsScanning="True"
IsAnalyzing="True"
Result="{Binding CodigoQr}"
ScanResultCommand="{Binding ScanCommand }" />
</StackLayout>
ViewModel:
public class BarcodeScanVM : BaseViewModel
{
private Result _codigoQr;
public Result CodigoQr
{
get { return _codigoQr; }
set
{
_codigoQr = value;
OnPropertyChanged();
}
}
public AsyncCommand ScanCommand { get; set; }
public BarcodeScanVM()
{
ScanCommand = new AsyncCommand(OnScanResultCommand);
}
async Task OnScanResultCommand()
{
var text = CodigoQr;
}
}```

Answer 1

You can use the code-behind the view for the actions. And use the VM for other properties
XAML:
<zxing:ZXingScannerView
IsAnalyzing="{Binding IsAnalyzing}"
IsScanning="{Binding IsScanning}"
OnScanResult="CameraScanner_OnScanResult" />
Code behind:
private void CameraScanner_OnScanResult(ZXing.Result result)
{
((MyViewModel)BindingContext).OnScanComplete(result.Text);
}

Answer 2

Try without using ScannerView. In XAML add a Label (I'm using an Entry) and a Button that opens the scanner:
<Button Text="QR Scan"
TextColor="White"
CornerRadius="30"
Clicked="ButtonScan"/>
<Entry BackgroundColor="White"
IsTextPredictionEnabled="False"
TextTransform="Uppercase"
FontSize="Body"
TextChanged="Search"
Placeholder="Search"
TextColor="Black"
PlaceholderColor="Black"
x:Name="lblBarcode"
Keyboard="Chat">
On the Clicked Event of the Button:
private async void ButtonScan(object sender, EventArgs e)
{
PermissionStatus granted = await Permissions.CheckStatusAsync<Permissions.Camera>();
if (granted != PermissionStatus.Granted)
{
_ = await Permissions.RequestAsync<Permissions.Camera>();
}
if (granted == PermissionStatus.Granted)
{
try
{
MobileBarcodeScanner scanner = new MobileBarcodeScanner();
ZXing.Result result = await scanner.Scan();
if (result != null && result.Text != "")
{
lblBarcode.Text = result.Text; // <--- This places the result of scanner at Entry/Label
scanner.Cancel(); // <--- This closes the scanner
}
}
catch (Exception)
{
await DisplayAlert("Problem", "Something went wrong.", "ΟΚ");
}
}
else
{
await DisplayAlert("Problem", "No permissions to use camera.", "ΟΚ");
}
}

Answer 3

update: I tried this one, seems like the scanning command works but the program stops afterwards.
ViewMode:
private Result bcScanResult;
public Result BcScanResult
{
get => bcScanResult;
set
{
if (value == bcScanResult)
return;
bcScanResult = value;
OnPropertyChanged();
}
}
public AsyncCommand BcScanCommand { get; }
public CodeScanVM()
{
BcScanCommand = new AsyncCommand(BcScanCommand_Call);
}
async Task BcScanCommand_Call()
{
await App.Current.MainPage.DisplayAlert("Item", "Code Async
Command:" + Result, "OK");
return;
}
View:
<zxing:ZXingScannerView
x:Name="ScanView"
Result="{Binding BcScanResult}"
ScanResultCommand="{Binding BcScanCommand }"
IsScanning="True"
WidthRequest="300"
HeightRequest="300"/>

Answer 4

You can give a look at my sample app on github
xam-barcode-scanner
It works in both platforms and without the need of ZXing library